从孩子设置父母的状态 - 反应？答案

【问题标题】：Setting state in parent from child - React?从孩子设置父母的状态 - 反应？
【发布时间】：2018-10-26 12:44:23
【问题描述】：

尝试在父组件（名为 parent.js）中设置状态，并在文件“daySelect.js”中名为“Book”的子组件中选择日期，以删除预订详细信息。但是，得到一个错误，说我从孩子调用的函数（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.log(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.log(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) {。
我可以提个建议吗，.. React 很棒，但是使用状态会变得混乱。使用 React 的一种常见方法是使用 Single Source of Truth 意识形态。 Redux 很受欢迎，但我觉得它太冗长了，所以我使用代理进行了我自己的状态管理。

标签： javascript reactjs

【解决方案1】：

您将一个名为 onClick 的函数传递给 Book 组件，因此您必须编写 this.props.onClick 而不是 this.props.onUpdate

尝试将您的onClick 更改为onUpdate 或致电this.props.onClick(data) 而不是this.props.onUpdate(data)

更新：你可以now pass childrens to Route

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

更新：现在您必须在 React Router v6 中将嵌套子级更改为 element={}

<Route path=":id" element={<Book />} />

【讨论】：

谢谢，维克多，但即使将 this.props.onUpdate(data) 更改为 this.props.onClick(data) 后仍然收到以下错误消息：TypeError: _this.props.onClick is not一种功能感觉就像父母和孩子之间没有有效地交流..
我无法彻底检查它，但我知道将函数传递给路由器有些可疑，因为我从未这样做过

【解决方案2】：

两件事你没有做对。

首先：你不能直接将 props 传递给 Route 组件，你需要使用render prop 来做到这一点

查看Passing custom props to router component in 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.log(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>
        );

    }

}

【讨论】：