我的 React 组件基于 props 设置了一个名为 userInGroup 的状态属性。
this.state = {
userInGroup: this.props.user
? this.props.user.groups.includes(props.group._id)
: false,
};
这有效，但在props更改时不会更新，并且 userInGroup 的值也应该更改，直到我刷新页面。如何以被动方式进行此更新？
也许我可以使用 componentWillUpdate 或 componentDidUpdate 但随后我会重复 userInGroup 使用的逻辑。这种重复是不可避免的吗？
您需要使用getDerivedStateFromProps。其他方法现在已被弃用并被认为是不安全的。
getDerivedStateFromProps 在调用 render 方法之前调用，在初始安装和后续更新中都是如此。它应该返回一个对象来更新状态，或者返回 null 来不更新任何内容。
此方法适用于状态取决于props随时间变化的罕见用例。例如，实现一个组件来比较它的前一个和下一个孩子来决定其中的哪个进出动画可能很方便。
static getDerivedStateFromProps(props) {
return {
userInGroup: props.user
? props.user.groups.includes(props.group._id)
: false,
}
}
是的，当您想在props更改时更新状态时，您需要使用componentWillReceivePropswith constructor/componentDidMount，因为constructor/componentDidMount仅在组件安装时调用一次，并且componentWillReceiveProps()在安装的组件接收新props或父组件更新之前调用
您可以编写一个包含逻辑的函数
this.state = {
userInGroup: this.getUserStatus();
};
componentWillReceiveProps(nextProps) {
if(nextProps.user !== this.props.user) {
this.setState({userInGroup: this.getUserStatus(nextProps)})
}
}
getUserStatus = (newProps) => {
const data = newProps || this.props
return data.user
? data.user.groups.includes(data.group._id)
: false
}