反应事件处理程序。向数组添加值

Question

为什么你好Javascript向导，

我真的开始潜入React并且不得不说，我发现它非常有趣。但是，我遇到了从输入表单中获取值并将其添加到数组中的问题。我正在构建一个小应用程序（我的创造力），并且每次单击添加按钮时，我都会尝试将输入字段中的值添加到数组中。

这里有捕获，它工作得很好，只是没有按下第一次提交。例如，假设我启动应用程序，键入＆＃34; Hello＆＃34;进入输入字段，然后按回车键。正如你在我的代码中看到的那样，我在函数末尾有一个console.log设置，所以我可以看到每次单击按钮时会发生什么。

第一次点击按钮时，我登录到控制台的所有内容都是＆＃34; []＆＃34;，在下次点击时，我会看到我想要的内容，我在哪里得到一个日志说，[ ＆＃34;你好＆＃34]。我之后添加的任何其他输入只是游戏地添加到数组中。我觉得必须有一些非常微小的事情可能只需要一副经验丰富的眼睛。我希望对可能的解决方案有任何反馈，也许我可以通过任何方式使代码更好。

以下是控制台的快速屏幕截图。第一次点击从[]部分开始。

＆＃13;

＆＃13;

import React, { Component } from 'react';
import ListItem from './list-item';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { tasks: [] };
    this.addTask = this.addTask.bind(this);
  }

  addTask(event) {
    event.preventDefault();
    var form = this._input.value;
    var allTasks = this.state.tasks.concat([form]);
    this.setState({tasks: allTasks});
    console.log(this.state.tasks);
  }

  render() {
    return (
      <div className="app-main">
        <div className="col-sm-12 text-center">
          {/* App Title */}
          <h1>Task App</h1>
          <div id="formWrapper">
            {/* Start of Form */}
            <form onSubmit={this.addTask}>
              <input ref={(el) => this._input = el} />
              <button type="submit" className="btn btn-md btn-primary">Add</button>
            </form>
            {/* List Item */}
            <ListItem tasks={this.state.tasks} />
          </div>
        </div>
      </div>
    );
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据文档，

  

setState（）不会立即改变this.state但会创建一个   待定状态转换。调用后访问this.state   方法可以返回现有值。

     

无法保证调用setState 的同步操作   并且可以批量调用以获得性能提升。

从the notes section of setState，我的重点是粗体。所以setState不会立即改变状态。虽然，当setState合并了新状态时，它将始终再次调用render，因此ListItem 将获取新任务，而不是同步，或者可能不是立即。

将console.log向下移动到渲染功能中，您将看到差异：

...
<ListItem tasks={this.state.tasks} />
{console.log(this.state.tasks)}
...