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

为什么是Javascript向导

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

这里是一个陷阱，它工作得很好，只是不是第一次提交按钮。例如，假设我启动应用程序，在输入字段中键入“Hello”，然后按enter键。正如您在我的代码中所看到的，我在函数末尾有一个console.log设置，这样我就可以看到每次单击按钮时发生的情况

第一次单击按钮时，我登录到控制台的所有内容都是“[]”，下一次单击时，我会看到我想要的内容，在那里我会看到一个日志，上面写着：[“Hello”]。之后我添加的任何其他输入都会顺利地添加到数组中。我觉得必须要有一双更老练的眼睛才能在很短的时间内完成一些事情。如果您能给我提供任何可能的解决方案的反馈，我将不胜感激，也许还有任何方法可以让代码变得更好

下面是控制台的快速屏幕截图。第一次单击从[]零件开始

import React，{Component}来自'React'；
从“./列表项”导入列表项；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={tasks:[]}；
this.addTask=this.addTask.bind（this）；
}
添加任务（事件）{
event.preventDefault（）；
var form=此值。\输入值；
var allTasks=this.state.tasks.concat（[form]）；
this.setState（{tasks:allTasks}）；
log（this.state.tasks）；
}
render（）{
返回(
{/*应用程序标题*/}
任务应用程序
{/*表单的开头*/}
这个。_input=el}/>
添加
{/*列表项*/}
);
}
}

根据文件

setState（）不会立即改变this.state，但会创建 等待状态转换。调用此命令后访问this.state 方法可能返回现有值

无法保证调用setState的同步操作 为了提高性能，可以对调用进行批处理

从中，我用粗体强调。所以

setState

不会立即改变状态。虽然，当setState将新状态合并到中时，它将始终再次调用

render

，因此

ListItem

将不同步地获取新任务，或者可能不会立即获取新任务

将

控制台。log

向下移动到渲染函数中，您将看到不同之处：

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

。。。
{console.log（this.state.tasks）}
...

请记住，

setState

将回调函数作为可选的第二个参数。如果OP希望看到状态在发生后立即发生变化，他可以传递一个记录新状态的函数。你们两个都应该得到Willy Wonka Javascript工厂的金票。这两个答案都非常有用，100%有效。