从Firestore获取文档后填充状态



我正在构建一个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

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

如果你想确保公司已经更新,也许你可以在UI中使用它,或者你可以使用带有公司依赖的useEffect钩子(当公司状态改变时,它将执行它的回调)

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

setCompany告诉React排队更新,但实际上并没有执行它。

你可以用第二个useEffect对更新做出反应:

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

还要注意添加:

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

将显示更改,因为更改(一旦处理)将触发重新渲染。

相关内容

  • 没有找到相关文章

最新更新