Установка состояния в родительском от дочернего - React?

Попытка установить состояние в родительском компоненте (с именем parent.js) с датой, выбранной в дочернем компоненте с именем 'Book' в файле 'daySelect.js', чтобы сохранить детали бронирования. Тем не менее, появляется сообщение об ошибке, в котором говорится, что функция (onUpdate), которую я вызываю из дочернего элемента для обновления состояния в родительском элементе, «не является функцией»:

Родительское кодирование (parent.js):

class Parent extends Component {
  // Setting the component's initial state
  constructor(props) {
    super(props);
  this.state = {
    date: "",
  };
}

onUpdate = (dateChosen) => {
  this.setState({
    date: dateChosen
    })
   console.info(this.state.date);
    };

render() {
return (
  <div>
        <Route exact path = "/" component = {Home} />
        <Route exact path = "/book" component = {Book} onClick = {this.onUpdate}/>
        <Route exact path = "/time" component = {Time} />
        <Route exact path = "/form" component = {Form} />
  </div>
);

} }

Дочерний компонент:

class Book extends Component {
// Setting the component's initial state
 constructor(props) {
   super(props);
 }

  onClick = (date) => {
   var dateChosen = date[0];
   // console.info(dateChosen);
   this.props.onUpdate(date);
   this.setState({date: dateChosen});
  };


 render() {
  return (
    <div>
     <ReactWeeklyDayPicker mobilView = {window.innerWidth < 100} format = {'YYYY-MM-DD'} selectDay = {this.onClick.bind(this)} />
    </div>
);
}

export default Book;
onUpdate = (dateChosen) => {, вероятно, должен быть onUpdate(dateChosen) {.
Tyler 26.10.2018 14:52

Могу я сделать предложение ... React - это здорово, но использование состояния может стать беспорядочным. Распространенный подход к использованию React - использование идеологии Single Source of Truth. Redux популярен, но мне он показался слишком многословным, и я использовал собственное управление состоянием через прокси.

Keith 26.10.2018 14:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
690
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы передали функцию onClick компоненту Book, поэтому вам нужно писать this.props.onClick, а не this.props.onUpdate.

Попробуйте либо сменить onClick на onUpdate, либо вызвать в this.props.onClick(data) вместо this.props.onUpdate(data).

ОБНОВЛЕНИЕ: можно теперь передайте детей в Route

<Route exact path = "/book"><Book {...props} onClick = {this.onUpdate}/></Route>

Спасибо, Виктор, но по-прежнему появляется следующее сообщение об ошибке даже после изменения this.props.onUpdate (data) на this.props.onClick (data): TypeError: _this.props.onClick не является функцией. неэффективно общаются друг с другом ..

Eric K. 26.10.2018 15:09

Мне не удалось это тщательно проверить, но я знал, что что-то не так с передачей функции маршрутизатору, поскольку я никогда этого не делал.

Victor Jozwicki 26.10.2018 18:06
Ответ принят как подходящий

Две вещи, которые вы сделали неправильно.

Во-первых: вы не можете напрямую передать реквизиты компоненту Route, для этого вам нужно использовать render prop.

Подробнее см. Передача пользовательских реквизитов компоненту маршрутизатора в React-Router v4.

Во-вторых: вы можете получить доступ к реквизитам в дочернем компоненте с именем, которое вы ему передали. В вашем случае это будет this.props.onClick вместо this.props.onUpdate

class Parent extends Component {
  // Setting the component's initial state
  constructor(props) {
    super(props);
  this.state = {
    date: "",
  };
}

onUpdate = (dateChosen) => {
  this.setState({
    date: dateChosen
    })
   console.info(this.state.date);
    };

    render() {

        return (
          <div>
                <Route exact path = "/" component = {Home} />
                <Route exact path = "/book" render = {(props) => <Book {...props} onClick = {this.onUpdate}>} />
                <Route exact path = "/time" component = {Time} />
                <Route exact path = "/form" component = {Form} />
          </div>
        );

    }

}

Другие вопросы по теме