Javascript Redux或setTimeout-如何查看子组件中的道具更改？

我有一个应用程序组件，它从服务器加载JSON数据。 加载数据后，我更新子组件的状态

现在我的函数如下所示：

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

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

this.setState({users: newProps.users}); 
setTimeout(()=> { this.setState({ tasks: this.getTasksArray() }, 0) 

我使用setTimeout来等待数据是否加载并发送到子级。但我敢肯定，这不是最好的办法 也许，最好使用redux而不是setTimeout

父组件加载数据：

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

家长通过以下方式发送道具：

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

所以，我的问题是：观察子组件中的更改的最佳方式是什么？

---

我的意思是在这种特殊情况下。

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

因此，在子组件中使用

componentWillReceiveProps

lifecycle方法而不是使用

setTimeout

，它将在您更改

props

值（父组件的状态）时被调用

像这样：

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

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

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

还有一件事，不要在一个函数中多次调用

setState

，因为

setState

将触发重新渲染，所以首先执行所有计算，然后在最后一次调用中执行

setState

，并更新一次调用中的所有值

根据：

在装入组件之前调用componentWillReceiveProps（） 接收新道具。如果需要更新状态以响应 道具更改（例如，要重置道具），您可以比较this.props 和nextProps，并在中使用此.setState（）执行状态转换 这个方法

更新：

您正在从

cWRP

方法调用一个方法，并使用该方法中的

props

值，

this.props

将仅在该生命周期方法之后具有更新的值。因此，您需要将newProps值作为参数传递到此

函数

中，并使用它而不是

this.props

像这样：

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

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

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

---

查看此答案了解更多详细信息：

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

因此，在子组件中使用

componentWillReceiveProps

lifecycle方法而不是使用

setTimeout

，它将在您更改

props

值（父组件的状态）时被调用

像这样：

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

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

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

还有一件事，不要在一个函数中多次调用

setState

，因为

setState

将触发重新渲染，所以首先执行所有计算，然后在最后一次调用中执行

setState

，并更新一次调用中的所有值

根据：

在装入组件之前调用componentWillReceiveProps（） 接收新道具。如果需要更新状态以响应 道具更改（例如，要重置道具），您可以比较this.props 和nextProps，并在中使用此.setState（）执行状态转换 这个方法

更新：

您正在从

cWRP

方法调用一个方法，并使用该方法中的

props

值，

this.props

将仅在该生命周期方法之后具有更新的值。因此，您需要将newProps值作为参数传递到此

函数

中，并使用它而不是

this.props

像这样：

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

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

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

查看此答案了解更多详细信息：

我发现了问题

我有一个getTaskArray（）函数，它依赖于props并使用this.props.users。 所以，当我像这样更新状态时：

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

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

this.setState({users: newProps.users}); 
setTimeout(()=> { this.setState({ tasks: this.getTasksArray() }, 0) 

函数的作用是：使用空数组。 但当我将其拆分为两行并添加setTimeout（fn，0）时，如下所示：

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

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

this.setState({users: newProps.users}); 
setTimeout(()=> { this.setState({ tasks: this.getTasksArray() }, 0) 

函数的作用是：使用已更新的数组。 setTimeout（fn，0）使getTasksArray（）在所有其他函数之后运行（即使我将timeout设置为0毫秒）

以下是console.log的屏幕截图，其中没有设置超时： 下面是设置超时的屏幕截图： 我发现了这个问题

我有一个getTaskArray（）函数，它依赖于props并使用this.props.users。 所以，当我像这样更新状态时：

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

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

this.setState({users: newProps.users}); 
setTimeout(()=> { this.setState({ tasks: this.getTasksArray() }, 0) 

函数的作用是：使用空数组。 但当我将其拆分为两行并添加setTimeout（fn，0）时，如下所示：

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

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

this.setState({users: newProps.users}); 
setTimeout(()=> { this.setState({ tasks: this.getTasksArray() }, 0) 

函数的作用是：使用已更新的数组。 setTimeout（fn，0）使getTasksArray（）在所有其他函数之后运行（即使我将timeout设置为0毫秒）

以下是console.log的屏幕截图，其中没有设置超时： 下面是设置超时的屏幕截图：

---

父组件正在进行api调用，您发送给子组件的响应是否正确？是。我更新了问题。家长正在进行api调用，并且您发送给子组件的响应正确吗？是。我更新了问题。感谢您对componentWillReceiveProps（）的建议。但只有当我使用

componentWillReceiveProps（newProps）{setTimeout（（）=>{this.setState（{users:newProps.users，tasks:this.getTasksArray（）}），0）；}

而不是：

componentWillReceiveProps（newProps）{this.setState（{users:newProps.users，tasks:this.getTasksArray（）}）时，它仍然有效

@alexfrize这也可以，但是setTimeout有什么用呢？你会在这个生命周期方法中得到数据，在一段时间后或立即设置状态完全取决于你。我不知道。这就是为什么我要这么做asking@alexfrize使用

setTimeout

的原因：请参见

componentWillReceiveProps

method

this。props

将具有上一个值而不是更新的值，在此方法之后，只有

this。props

将具有新值，因此，当您使用timeout

时，此.props

将在该时间内更新。解决方法是，以我建议的方式使用代码，并将

getTaskArray

方法中的

newProps

作为参数传递，并使用该参数而不是

this.props

@alexfrize检查此答案，以了解有关

this.props

具有先前值的原因的更多详细信息