Попытка установить состояние в родительском компоненте (с именем 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;
Могу я сделать предложение ... React - это здорово, но использование состояния может стать беспорядочным. Распространенный подход к использованию React - использование идеологии Single Source of Truth. Redux популярен, но мне он показался слишком многословным, и я использовал собственное управление состоянием через прокси.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы передали функцию 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 не является функцией. неэффективно общаются друг с другом ..
Мне не удалось это тщательно проверить, но я знал, что что-то не так с передачей функции маршрутизатору, поскольку я никогда этого не делал.
Две вещи, которые вы сделали неправильно.
Во-первых: вы не можете напрямую передать реквизиты компоненту 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>
);
}
}
onUpdate = (dateChosen) => {, вероятно, должен бытьonUpdate(dateChosen) {.