从 firestore 获取数据并设置为 useEffect 中的状态在第一次渲染中不起作用答案

【问题标题】：Fetching data from firestore and setting to a state in useEffect not working in first render从 firestore 获取数据并设置为 useEffect 中的状态在第一次渲染中不起作用
【发布时间】：2023-02-13 16:23:03
【问题描述】：

以下代码从 firebase firestore 获取数据并在 useEffect 中设置为状态“products”：

const { firebase } = useContext(FirebaseContext)
  const [products, setProducts] = useState([])                                        
  const db=firebase.firestore();

  useEffect(() => {
    const unsubscribe = db.collection("products").onSnapshot((snapshot) => {
      const newProducts = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setProducts(newProducts);
      console.log( products);
    });

    return () => unsubscribe();
  }, []);

当第一个渲染产品正在安慰空数组时。（数据正确地从 firestore 获取并作为对象数组进入“newProducts”）。

在运行期间，如果代码中的某些内容发生更改，服务器将重新启动，并且现在产品状态正在正确调整..

刷新浏览器时，产品再次安慰空数组..

我期待“产品”状态在 useEffect 的第一次工作中设置来自 firestore 的值

【问题讨论】：

标签： reactjs google-cloud-firestore react-hooks

【解决方案1】：

这是因为 Products 状态仍然显示以前的值，如果您想查看它的价值，请在 useeffect 之外使用它或在 setProduct 回调中记录 prevState 以查看它的价值

像这样：

  setProducts((prevState)=>{
    console.log(prevState)
    return prevState
  });

【讨论】：