为什么异步函数中的多个 setState 调用会导致多次渲染？答案

【问题标题】：Why do multiple setState calls in an async function cause multiple renders?为什么异步函数中的多个 setState 调用会导致多次渲染？
【发布时间】：2021-05-04 22:47:01
【问题描述】：

问题总结得很好here；基本上，如果您在 useEffect 中有一个异步函数（这是您期望此类函数的地方），您会为每个更新的状态重新渲染组件。我通常不想像作者的解决方案/解决方法那样将事情捆绑在一起，而且对我来说这种行为没有意义（您希望所有状态更新一起发生）。

这是设计使然吗？如果是这样，是否有更好的方法来处理这个问题，这样我就可以执行所有更新而不必担心订购等问题？这感觉像是一个错误，但也许只是我理解的一个缺陷。

参考代码：

export default function App (): JSX.Element {
  const [user, setUser] = useState(null)
  const [pending, setPending] = useState(false)
  
  useEffect(() => {
    setPending(true)
    fetchUser().then((fetchedUser) => {
      setPending(false)
      setUser(fetchedUser) // This updated value won't initially be seen by other effects dependant on 'pending'
    })
  }, [])
  // …
}

【问题讨论】：

另外，新的concurrent mode 默认批处理所有同步更新，没有包装函数。
嗯，出于某种原因，我认为它不会让我在 24 小时后才能回答我自己的问题；可能是记错了，或者 StackOverflow 变了。也感谢您提供额外的参考。

标签： reactjs react-hooks

【解决方案1】：

最终解决了这个问题；见this。您目前需要手动批处理，使用ReactDOM.unstable_batchedUpdates(() => { ... })。尽管有这个名字，但它似乎被广泛认为是相当稳定的。

它也在当前正在开发中的 React Concurrent Mode 中得到纠正。

【讨论】：