React Native：在道具更改时更新 state 并在内部通过 setState()

Question

所以我有一个父组件将数据数组作为道具传递给子组件（子组件将此数组道具保存为自己状态的一部分），并且我希望孩子的 state 在此道具更改时更新。

我这样使用 getDerivedStateFromProps ：

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

但是，我还希望能够通过setState()更新子级中的 state 。 但是，当我调用setState()来更新this.state.messages时，不会反映更改（可能是因为 this.state.messages 的更改仅在道具更改时发生，因为我已经覆盖getDerivedStateFromProps() )

有什么办法可以更新孩子的 state for this.state.messages当道具发生变化时，以及当我想在孩子内更新它时？

我的限制：

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

Answer 1

您的父 state 作为道具传递给子组件。 尝试在子组件中使用shouldComponentUpdate方法。

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

现在使用componentDidUpdate更新您的 state：

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