javascript - 将数据从 child 传递给 parent ，React.js

Question

我正在尝试将数据从子组件传递到父组件。但是，这样做时，出现错误:

警告:setState(...):无法在现有状态转换期间更新(例如在渲染或其他组件的构造函数中)。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至 componentWillMount

我不明白，因为当我对事件处理程序使用相同的模式时，一切都很好。如何成功地将数据从子组件传递到父组件而不出现错误？

const Child = (props) => {
  let message = 'Hi mom'
  props.callBackFromParent(message);
  return <h3>{props.message}</h3>
};

class Parent extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      messageFromChild: '',
    }
    this.callBackFromParent = this.callBackFromParent.bind(this);
  }
  
  callBackFromParent(dataFromChild){
    this.setState({messageFromChild: dataFromChild})
  }
  
  render(){
    return (
      <div>
        <h2>Message from Child is:</h2>
       
        <Child 
          message={this.state.messageFromChild}
          callBackFromParent={this.callBackFromParent}
        />
      </div>
    )
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

在渲染期间不允许调用 setState，调用 props.callBackFromParent 会导致这种情况。

您可以将该函数用作事件处理程序，它将按预期设置父级的状态。

示例

const Child = (props) => {
  let message = 'Hi mom';

  return <h3 onClick={() => props.callBackFromParent(message)}>{props.message}</h3>
};