从 Firestore 获取文档后填充状态答案

【问题标题】：Populating a state after getting a document from the Firestore从 Firestore 获取文档后填充状态
【发布时间】：2022-08-11 09:44:57
【问题描述】：

我正在构建一个 CRUD，在编辑步骤中我试图用来自特定文档的数据填充编辑字段。我设法从 Firestore 中获取数据，但我无法将数据置于状态，它仍然是空的。知道我该怎么做吗？

import { doc, getDoc } from \"firebase/firestore\";
import { useEffect, useState } from \"react\";
import { useParams } from \"react-router-dom\";
import { db } from \"../Firebase/firebase\";

export default function EditData() {
  const [company, setCompany] = useState({});
  const params = useParams();

  useEffect(() => {
    const getData = async () => {
      const docRef = doc(db, \"companies\", params.id);
      const docSnap = await getDoc(docRef);
      setCompany({ ...docSnap.data() });
      console.log(docSnap.data());
      console.log(company);
    };
    getData();
  }, [params.id]);

  return (
    <div>
      Form here.
    </div>
  );
}

console.log

标签： reactjs firebase google-cloud-firestore crud use-state

【解决方案1】：

设置状态是一个异步操作，所以值不会在下一行更新。

如果你想确保公司已经更新，也许你可以在 UI 中使用它，或者你可以使用带有公司依赖的 useEffect 钩子（它会在公司状态发生变化时执行它的回调）

useEffect(() => console.log(company), [company])

【讨论】：

【解决方案2】：

setCompany 告诉 React 将更新加入队列，但实际上并没有执行它。

您可以通过第二个useEffect 对更新做出“反应”：

  useEffect(() => {
      console.log(company);
    };
    getData();
  }, [company]);

另请注意，添加：

<div>{JSON.stringify(company)}</div>

将显示更改，因为更改（一旦处理）将触发重新渲染。

【讨论】：

【解决方案3】：

这解决了吗？我有同样的问题

【讨论】：