React事件处理程序。为阵列添加值

Question

为什么你好Javascript向导，

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

下面是捕获，它工作得很好，只是没有在按钮的第一次提交。例如，让我说我启动应用程序，在输入字段中输入“Hello”，然后按回车。正如你可以在我的代码中看到的，我在函数结尾处设置了一个console.log设置，以便每次点击按钮时都能看到发生了什么。

第一次单击按钮时，我所有登录到控制台的内容都是“[]”，在下一次单击时，我会看到我想要的内容，我在哪里看到日志说“[你好]”。之后我添加的任何其他输入都会被添加到数组中。我觉得必须有一些相当细微的事情，可能只需要更经验的一双眼睛。我很感谢任何关于可能的解决方案的反馈意见，也许我可以通过任何方式使代码更好。

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

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> 
 
    ); 
 
    } 
 
}

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)} 
...