Javascript React - componentWillReceiveProps 中的 setState
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31859391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React - setState in componentWillReceiveProps
提问by Bene
Is this legal?
这是合法的吗？
componentWillReceiveProps: function(nextProps) {
if (typeof nextProps.contact != 'undefined') {
this.setState({forename: nextProps.contact.forename});
this.setState({surname: nextProps.contact.surname});
this.setState({phone: nextProps.contact.phone});
this.setState({email: nextProps.contact.email});
}
}
Because I don't know how to fill my inputs and still be able that the user can edit the inputs. So I came up with this solution instead of trying to manipulate the this.props.
因为我不知道如何填写我的输入并且仍然能够让用户编辑输入。所以我想出了这个解决方案，而不是试图操纵 this.props。
Any suggestions?
有什么建议？
回答by Mikhail Romanov
Your code is legal according to react documentation.
根据react 文档，您的代码是合法的。
You also may consider to put this code inside getInitialStatemethod as according to another react docinitializing from props is not an anti-pattern.
您也可以考虑将此代码放入getInitialState方法中，因为根据另一个从 props 初始化的react doc不是反模式。
You also can replace several calls with one setStatemethod call:
您还可以用一个setState方法调用替换多个调用：
this.setState({forename: nextProps.contact.forename,
surname: nextProps.contact.surname,
phone: nextProps.contact.phone,
email: nextProps.contact.email});
回答by gyosifov
As of React v16.6.3 this is considered UNSAFE and componentWillReceivePropsis marked for deprecation. The removal is planned to happen in version 17.
从 React v16.6.3 开始，这被认为是不安全的，componentWillReceiveProps并被标记为弃用。删除计划在版本 17 中进行。
Note:
Using this lifecycle method often leads to bugs and inconsistencies, and for that reason it is going to be deprecated in the future.
If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.
For other use cases, follow the recommendations in this blog post about derived state.
If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.
If you used componentWillReceiveProps to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.
In very rare cases, you might want to use the getDerivedStateFromProps lifecycle as a last resort.
笔记：
使用这种生命周期方法通常会导致错误和不一致，因此它将在未来被弃用。
如果您需要执行副作用（例如，数据获取或动画）以响应 props 的更改，请改用 componentDidUpdate 生命周期。
对于其他用例，请遵循此博客文章中有关派生状态的建议。
如果您使用 componentWillReceiveProps 仅在 prop 更改时重新计算某些数据，请改用 memoization helper。
如果您使用 componentWillReceiveProps 在 prop 更改时“重置”某些状态，请考虑使用键使组件完全受控或完全不受控制。
在极少数情况下，您可能希望使用 getDerivedStateFromProps 生命周期作为最后的手段。
In your case you should use componentDidUpdateinstead.
在您的情况下，您应该componentDidUpdate改用。
回答by Haimeng
According to this react doc, changing states inside componentWillReceivePropsis not recommended. The doc explains it very clearly.
根据这个react doc，不建议更改componentWillReceiveProps内的状态。该文档非常清楚地解释了它。
And it also gives us alternative solutions for "fully controlled component" and "uncontrolled components", please read this react doc
它还为我们提供了“完全受控组件”和“非受控组件”的替代解决方案，请阅读此react doc
回答by Shivam
The only reason componentWillReceivePropsexists is to give the component an opportunity to setState. So yes, any state you set synchronously in it will be processed together with the new props.
componentWillReceiveProps存在的唯一原因是给组件一个设置状态的机会。所以是的，您在其中同步设置的任何状态都将与新道具一起处理。
