Question

因此，我有一个父组件，该组件将数据数组作为道具传递给子组件（子组件将数组道具保存为自身状态的一部分），并且我希望当该道具改变时，孩子的状态得以更新

我这样使用getDerivedStateFromProps：

static getDerivedStateFromProps(props, state) {
    if (props.messages != state.messages) {
        return {
            messages : [ ... props.messages]
        };
    }
    return null;
}

但是，我也希望能够通过setState()更新子状态。但是，当我调用setState()来更新this.state.messages时，更改未得到反映（大概是因为对this.state.messages的更改仅在道具更改时发生，因为我已覆盖{{1} }）

当道具发生变化时，以及我想在孩子内部进行更新时，有什么方法可以同时更新getDerivedStateFromProps()的孩子状态吗？

我的约束条件：

我不能将数据所有权仅隔离给父母或孩子之一
我希望其他人使用此组件，所以我不希望他们必须从父级传递功能作为更新子级组件中父级数据源的道具

Answer 1

您的父状态作为prop传递给子组件。尝试在子组件中使用 shouldComponentUpdate 方法。

shouldComponentUpdate(nextProps){
if(nextProps.messages.length > this.props.messages.length)
    return true
return true;
}

现在使用 componentDidUpdate 更新您的状态：

componentDidUpdate(prevProps) {
     // Typical usage (don't forget to compare props):
      if (this.props.messages.length !== prevProps.messages.length) {
        this.setState({
        messages: this.props.messages
        )}
      }
    }

React Native：当道具改变时更新状态并通过setState（）在内部更新

1 个答案: