为什么我的状态没有立即在控制台日志中更新答案

【问题标题】：Why does my state not update right away in console log为什么我的状态没有立即在控制台日志中更新
【发布时间】：2020-07-04 08:10:53
【问题描述】：

我正在学习 React 和 React 钩子，我有一个问题。我有这种称为房间的状态，其中包含房间对象的数组。我创建了一个添加新房间的组件。您填写一个表单，当单击提交按钮时，它会启动一个函数，在该函数中我使用 setRooms([...rooms, newRoom]) 编辑状态，同时它会更新页面上的房间。出于某种原因，当我尝试在控制台中记录它时（在第一次编辑房间的同一个 onSubmit 函数中），它显示了以前的状态，即使它应该被更新并且我可以告诉它已经更新，因为新房间显示在页面上。

请帮助我理解这一点，我无法理解它。

【问题讨论】：

标签： reactjs react-hooks console.log onsubmit use-state

【解决方案1】：

那肯定是因为当您console.log 时，rooms 状态尚未更新。

您应该记住，useState 是异步的，这意味着它不会立即反映它的更改值。

如果你这样做：

const handleSubmit = (newRoom) => {
  setRooms([...rooms, newRoom])
  console.log(rooms)
  // Possibly won't get the desired result
}

但是作为 React，当状态改变时，它会重新渲染。您可以将console.log 放在返回之前的任何位置（如果是类，则为渲染函数）

const Component = () => {
  const handleSubmit = (newRoom) => {
    setRooms([...rooms, newRoom])
  }

  console.log(rooms)
    // Possibly you will get the desired result

  return (
     ..your component JSX
  )
}

【讨论】：

谢谢，你是对的。顺便问一下，为什么 setTimeout 函数在同一个 handleSubmit 方法中，没有显示正确的状态？我想，由于函数中的状态更新被延迟，如果我要 setTimeout 4 秒左右，它就有足够的时间来更新状态。
React 在文档中告诉你，他们不能保证你对states 所做的任何事情都会产生预期的效果。来自 React：Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

【解决方案2】：

setState 操作是异步的，为了提高性能而进行批处理。这在 setState 的文档中有说明。

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。无法保证 setState 调用的同步操作，并且调用可能会被批处理以提高性能。

因此，尽管您的 setState() 被赋予了房间的最新值，但到那时更新它需要时间，您的 console.log 会被打印出来。因此，设置状态后立即在控制台中访问 this.state 不会看到更新的值。

如果你想了解为什么 setState() 是异步的，这里是 stackoverflow 链接 - Link

【讨论】：