Question

My React组件基于props设置一个名为userInGroup的状态属性。

    this.state = {
        userInGroup: this.props.user
            ? this.props.user.groups.includes(props.group._id)
            : false,
    };

这可以工作，但是当props更改并且userInGroup的值也应该更改时不会更新，直到我刷新页面。如何以反应方式进行此更新？

也许我可以使用componentWillUpdate或componentDidUpdate但是Id会重复userInGroup使用的逻辑。这种重复是不可避免的吗？

Answer 1

是的，你需要使用componentWillReceiveProps和constructor/componentDidMount，当你想要在道具改变时更新状态，因为constructor/componentDidMount只在组件安装时被调用一次，而{{{}在安装的组件接收新的道具或父组件更新

之前调用1}}

您可以编写包含逻辑

的函数

componentWillReceiveProps()

Answer 2

您需要使用getDerivedStateFromProps。现在已淘汰其他方法，并认为这是不安全的。

getDerivedStateFromProps在调用render方法之前即被调用，无论是在初始安装还是在后续更新上。它应该返回一个对象以更新状态，或者返回null则不更新任何内容。

此方法适用于状态依赖于道具随时间变化的罕见用例。例如，实施一个组件来比较其上一个和下一个子项以决定要对哪个子对象进行动画制作，可能会很方便。

static getDerivedStateFromProps(props) {
  return {
    userInGroup: props.user
      ? props.user.groups.includes(props.group._id)
      : false,
  }
}

在道具中设置React组件中的状态并在道具更改时更新？

2 个答案: