父状态更改后更新子组件

时间:2019-02-18 18:17:26

标签: reactjs

这个问题已经得到here的回答,但情况总是在变化。

componentWillReceiveProps现在已弃用,很快将被删除。
那么,当父级需要获取一些数据时,更新子级组件的最干净方法是什么?

有关更多详细信息,请参见旧问题。
谢谢

更新:

基本上,父组件会获取一些数据,而子组件则需要这些数据。

这是子组件。

class Dropdown extends React.Component {
constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
}


// This is deprecated so need to be replaced by your answer
componentWillReceiveProps(nextProps) {
    this.setState({
        value: nextProps._layouts[0]
    });
}


handleChange(event) {
    this.setState({
        value: event.target.value
    });
}

render() {
    // The options for the dropdown coming from the parent
    const options = this.props._layouts.map((number) =>
        React.createElement("option", null, number)
    )

    // This logs the value coming from the parent
    // A timeout is needed since fetch is asynchronous
    setTimeout(() => {
        console.log(this.state.value)
    }, 400);

    // This is just a dropdown menu
    return React.createElement("div",
        null, React.createElement("span", {
            class: "custom-dropdown"
        }, React.createElement("select", {
            onChange: this.handleChange,
        }, options)));
    }
}

2 个答案:

答案 0 :(得分:1)

如果在父级中更改了shouldComponentUpdate(nextProps,nextState)true,则可以使用props并返回state

More info in the react documentation

答案 1 :(得分:0)

替换componentWillReceiveProps的生命周期方法是static getDerivedStateFromProps。 (实际上这并不完全正确,但是您可以用它达到相同的结果)
该函数是静态的,可以接收组件的状态和属性,并返回一个新对象以合并到组件的状态。

但是真正的问题是-您真的需要吗?上面问题的答案(略有调整):

getDerivedStateFromProps(nextProps) {
  return nextProps.data;
}

什么都不做。您也可以使用道具代替状态。
正如React文档所说:

  

这种方法适用于少数情况,其中状态取决于道具随时间的变化。