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

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 的更改仅在道具更改时发生，因为我已覆盖 getDerivedStateFromProps()）

有什么方法可以在道具更改时以及我想在孩子内部更新它时更新this.state.messages 的孩子状态？

我的限制：

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

Answer 1

您的父状态作为道具传递给子组件。尝试在子组件中使用 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
        )}
      }
    }