第一次加载页面加载时，React使用效应正在返回空数据

Question

我是通过使用效率对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函数正在抛出错误。但是，如果我再次提交，则随着数据填充而起作用。

要在第一页加载上获取数据，该怎么办？

Answer 1

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

这就是为什么我们具有使用的原因，这是一个内置的react钩子，当它的依赖项之一更改时，它会激活回调。

示例：

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

此 console.log 只有在状态完成更改并发生渲染后才会运行。

• 注意：该示例中的“用户”与您要处理的其他状态作品可以互换。

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

Answer 2

SetState 是异步的，无法保证状态将在您的日志点击时设置。

请参阅：

状态看起来要正确设置，您的日志语句可能不会反映未决的状态更改。