javascript - Redux 或 setTimeout - 如何观察子组件中的 props 变化？

Question

我有App组件，它从服务器加载JSON数据。加载数据后，我更新子组件的状态。

现在我的函数如下所示:

componentDidMount() {
  setTimeout(()=> {
    if (this.state.users.length !== this.props.users.length) {
      this.setState({users: this.props.users});
      this.setState({tasks: this.getTasksArray()});
  }, 500);
}

我使用 setTimeout 来等待数据是否加载并发送给子进程。但我确信这不是最好的方法也许，最好使用 redux 而不是 setTimeout。

父组件加载数据:

componentWillMount() {
  var _url = "/api/getusers/";
  fetch(_url)
  .then((response) => response.json())
  .then(users => {
    this.setState({ users });
    console.log("Loaded data:", users);
  });
}

父级发送 Prop :

<AllTasks users={this.state.users} />

所以，我的问题是:观察子组件变化的最佳方法是什么？我的意思是在这种特殊情况下。

Answer 1

是的，这不是正确的方法，因为 api 调用将是异步的，我们不知道需要多长时间。

因此，不要使用 setTimeout，而是在子组件中使用 componentWillReceiveProps 生命周期方法，只要您更改 props 值(状态)，它就会被调用父组件)。

像这样:

componentWillReceiveProps(newProps){
    this.setState({
        users: newProps.users,
        tasks: this.getTasksArray()
    })
}

还有一件事，不要在函数内多次调用 setState，因为 setState 会触发重新渲染，因此首先执行所有计算，然后执行 setState 在最后一次调用中更新所有值。

根据 DOC :

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

更新:

您正在从 cWRP 方法调用一个方法，并使用该方法内的 props 值，this.props 将在之后获得更新的值仅此生命周期方法。因此，您需要将 newProps 值作为此函数中的参数传递，并使用它而不是this.props。

像这样:

componentWillReceiveProps(newProps){
    this.setState({
        users: newProps.users,
        tasks: this.getTasksArray(newProps)
    })
}

getTasksArray(newProps){
    //here use newProps instead of this.props
}

查看此答案以了解更多详细信息:componentWillRecieveProps method is not working properly: ReactJS