-1

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

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

4

2 回答 2

2

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

您应该记住这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
  )
}
于 2020-03-23T20:16:49.127 回答
0

setState 操作是异步的，并且为了提高性能而进行批处理。这在 setState 的文档中进行了解释。

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

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

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

于 2020-03-23T20:12:28.863 回答