我正在构建一个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>
将显示更改,因为更改(一旦处理)将触发重新渲染。