Question

我刚开始反应，我得到了一个我无法理解的怪异行为。

  class App extends Component {

  state = {
    newTask: [
      {
      header: 'Header',
      description: 'Detailed description'
      }]}

  setTask = () => {

    console.log(this.state.newTask)

    this.setState({newTask: [
      {
      header: "some change",
      description: "some change again"
      }]});

    console.log(this.state.newTask)}

  render() {
    return (
      <div className="App">
      <h1>Hello There.</h1>
      <NewTaskModal callbackFromParent={this.setTask}/>
      <Tasks task={this.state.newTask}  />
      </div>
    );}}

export default App;

App组件是其他组件Tasks的父级，它是组件Task的父级。当我单击NewTaskModal组件中的按钮时，将调用setTask方法，它应该更新状态。我已将console.log放在负责更新状态以查看其当前值的代码块周围。

第一次单击按钮console.logs在两种情况下，任务组件中状态BUT的初始化值使用新值呈现任务（＆＃39;一些更改＆＃39;）。第二次单击按钮后，它最后更新状态，console.logs更新值。

我想要的结果是通过不更改状态来更新状态，而是通过向其添加更多标题和描述对象来更新状态。此外，我想在第一次点击按钮后立即更新状态，而不是在第二次点击后立即更新状态。

我花了好几个小时，我似乎无法找到正确的解决方案，所以我请求帮助..

谢谢。

Answer 1

在setState不正确之后立即阅读状态，because：

setState（）作为请求而不是立即命令来更新   零件。为了获得更好的感知性能，React可能会延迟它，并且   然后在一次通过中更新几个组件。 React没有   保证立即应用状态变化。

setState（）并不总是立即更新组件。有可能   批量或推迟更新，直到稍后。这使得阅读this.state   在调用setState（）之后就是一个潜在的陷阱。

我猜setTask可能是这样的：

setTask = (taskFromNewTaskModal) => {
  this.setState((state) => ({
    newTask: [
      ...state.newTask, taskFromNewTaskModal
    ]
  })
}

在上面的代码中，您必须将新任务从setTask传递给NewTaskModal，然后将其添加到任务列表中。

Answer 2

更改setTask函数，如下所示：

setTask = () => {
      console.log(this.state.newTask);
      let { newTask } = this.state;
      newTask.push({
             header: "some change",
            description: "some change again"
      });
    this.setState({ newTask });

     // console.log(this.state.newTask); // this can't work just after setting the state
   };

我所做的是：我从状态中读取newTask数组，使用更改附加新对象，并使用更新的newTask对象设置状态。

React - 更新状态中的数组

2 个答案: