第一次加载页面时，React useEffect 返回空数据

Question

我正在从 useEffect 对 firebase 进行 API 调用，当页面第一次加载时返回的数据为空，但如果我对代码进行任何更改并保存它就会填充。 我希望数据在页面第一次加载时出现。

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [users, setUsers] = useState({});
    const [status, setStatus] = useState({});

    const userDetailsRef = collection(db, "userDetails");
    const userStatusRef = collection(db, "userStatus");

    const handleSubmit = (event) => {
        event.preventDefault();
        users.map((user) => {
            if (email === user.email && password === user.password) {
                getEmail();
            }
        });
    };
    const getEmail = async () => {
        const data = await getDocs(userStatusRef);
        setStatus(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
        console.log(status);
        status.map((em) => {
            if (email === em.email) {
                updateStatus(em.id);
            }
        });
    };
    const updateStatus = async (id) => {
        const userDoc = doc(db, "userStatus", id);
        const status = { status: "online" };
        await updateDoc(userDoc, status);
        console.log("updated status");
    };

    useEffect(() => {
        getUsers();
    }, []);
    const getUsers = async () => {
        const data = await getDocs(userDetailsRef);
        setUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
        console.log(users);
    };

因为返回的数据为空，map function 报错。 但是，如果我再次提交，它会随着数据的填充而起作用。

对于要在第一页加载时获取的数据，我应该更改什么？

Answer 1

在 React 中设置 state 就像一个异步 function。
这意味着当您设置 state 并在其后放置一个console.log时，它可能会在 state 实际完成更新之前运行。

这就是为什么我们有useEffect ，一个内置的 React 钩子，当它的一个依赖项发生变化时激活回调。

例子：

useEffect(() => {
   console.log(users)
   // Whatever else we want to do after the state has been updated.
}, [users])

此console.log仅在 state 完成更改并发生渲染后才会运行。

• 注意：示例中的“用户”可与您正在处理的任何其他 state 部分互换。

查看文档以获取更多信息。

Answer 2

setState是异步的，不能保证 state 会在您的日志被命中时设置。

请参阅： https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

state 看起来设置正确，您的日志语句可能不会反映挂起的 state 更改。