Question

我正在尝试使用fase为(array of objects)的新传入值，根据之前的状态object更新状态。但由于某些原因，它不会发生......

我做错了什么？我的代码：

   handleCommentSubmit = (newEmployer) => {
       console.log('handleCommentSubmit BEFORE', this.state.employers, newEmployer); // array(5)
       this.setState((prevState, newEmployer) => { 
         employers: prevState.employers + newEmployer
       });
       console.log('handleCommentSubmit AFTER', this.state.employers); // still array(5)
   }

我的日志：

handleCommentSubmit BEFORE (6) [{…}, {…}, {…}, {…}, {…}, {…}], newEmployer: {first_name: "sdfsdf", last_name: "sdfsdf", birth_date: "123123-03-12", salary: "123123123"}
handleCommentSubmit AFTER (6) [{…}, {…}, {…}, {…}, {…}, {…}]

Answer 1

的变化：

1- setState是异步的，因此请使用回调来检查更新的值。

2-使用[].concat在数组中推送新值，+将无效。

3-您没有从更新程序功能返回object。

像这样写：

handleCommentSubmit = (newEmployer) => {
    this.setState((prevState, newEmployer) => ({
        employers: prevState.employers.concat(newEmployer)
    }), () => {
        console.log('handleCommentSubmit AFTER', this.state.employers);
    }); 
}

查看此答案以获取更多详细信息：

Why calling setState method doesn't mutate the state immediately?

Answer 2

如果你调用setState，它将不会立即在下一行中更新。它将在调用render方法后更新。如果要查看updatedState，可以像这样在setState中编写回调函数。

this.setState((prevState, newEmployer) => { 
         employers: prevState.employers + newEmployer
       }, () => console.log('UpdatedState', this.state.employers));

Answer 3

如果您的employers是数组，则可以在setState中使用spread operator：

[...prevState.employers, newEmployer]

但您根本不需要prevState。你可以：

this.setState({ 
         employers: [...this.state.employers, newEmployer]
       });

Answer 4

this.setState应该接收对象作为参数。不是功能。您可以轻松使用this.state：

handleCommentSubmit = (newEmployer) => {
  this.setState({ 
    employers: this.state.employers.concat(newEmployer)
  });
}

反应。如何使用以前的状态更新状态？

4 个答案: