这个问题已经得到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)));
}
}
答案 0 :(得分:1)
如果在父级中更改了shouldComponentUpdate(nextProps,nextState)
或true
,则可以使用props
并返回state
。
答案 1 :(得分:0)
替换componentWillReceiveProps
的生命周期方法是static getDerivedStateFromProps
。 (实际上这并不完全正确,但是您可以用它达到相同的结果)
该函数是静态的,可以接收组件的状态和属性,并返回一个新对象以合并到组件的状态。
但是真正的问题是-您真的需要吗?上面问题的答案(略有调整):
getDerivedStateFromProps(nextProps) {
return nextProps.data;
}
什么都不做。您也可以使用道具代替状态。
正如React文档所说:
这种方法适用于少数情况,其中状态取决于道具随时间的变化。