反应不是状态不更新第一次答案

【问题标题】：React not state not updating first time反应不是状态不更新第一次
【发布时间】：2021-06-22 17:02:42
【问题描述】：

这是我的代码：

const [module, setModule] = useState([]);

useEffect(()=> {

async function getModuleInfo(){
        let ModuleInfo = await firebase 
        .firestore()
        .collection('Modules')
        .doc('PBS1Module1')
        .get();
        if (!ModuleInfo.exists){
          console.log('geen module info')
        } else {
          let ModuleInfov2 = ModuleInfo.data();
          setModule(ModuleInfov2)
     
        }} getModuleInfo()
    console.log(module)
}, [])

当我进入这个屏幕时，第一个日志是一个空数组。然后，当我删除 console.log() 并将其保存并将其更改回 console.log(module) 时，它会为我提供所需的数据。

我做错了什么？我所有的导入语句都很好，因为它们都在工作。

【问题讨论】：

标签： reactjs firebase react-native

【解决方案1】：

这是因为当您在 useEffect 挂钩中注销值 module 时，您现在有一个 stale closure。当组件最初呈现时，module 的值是[]，所以这就是传递给useEffect 内部闭包的值。当您通过 setModule 函数更新状态时，React 将使用更新后的状态重新渲染组件并获得预期值。为了帮助理解这一点，请尝试将您的console.log 移出useEffect。这将使它在每次组件渲染时运行，而不是现在它只在第一次渲染时运行，因为 useEffect 钩子上的依赖数组是空的。

我使用以下示例进行了测试，运行时我按以下顺序获取日志：

fresh data is:  null
stale data is:  null
fresh data is:  (4) [1, 2, 3, 4]

import { useEffect, useState } from "react";

const fetchData = async () => {
  return [1, 2, 3, 4, ]
}

export const App = () => {
  const [data, setData] = useState(null)
  useEffect(() => {
    const asyncFetch = async () => {
      const data = await fetchData();
      setData(data);
    }
    asyncFetch();
    console.log("stale data is: ", data);
  }, []);
  console.log("fresh data is: ", data);
  return (
    <div>

    </div>
  )
}

【讨论】：