为什么State总是空的？

Question

我已经彻底研究了所有的问题，但没有一个直接适用于我的问题。我正在循环访问用户ID数组并匹配它们以从我的firestore DB中获得一个用户。我会毫无问题地返回结果，但当我将其存储在状态数组中并运行控制台日志时，我的状态数组总是空的。第一个console.log工作并显示DB的结果。

const UsersScreen = (props) => {

    const [state, setState] = useState({
        users: []
    });  

    const getUserProfiles = () => {
        let users = [];
        //networkUsers is an array with the ids
        networkUsers.forEach(userId => { 
            db.doc(userId).get().then((doc) => {
                users.push(doc.data());
                console.log('localusers', users)
            }).catch((error) => {
                console.log('caught error', error)
            })
        });

        setState({ users: users });
    };


    useEffect(() => {
        getUserProfiles();
    }, []);

console.log('state', state.users)
}

请帮帮忙。

Answer 1

从Firestore获取文档的逻辑是异步的。但是，对setstate的调用是同步的。它将始终在获取文档之前。解决方案是获取文档，然后设置状态。这里有一个例子：

const UsersScreen = (props) => {
  const [state, setState] = useState({
    users: [],
  });

  const getUserProfiles = () => {
    Promise.all(networkUsers.map((userID) => db.doc(userId).get()))
      .then((docs) => {
        setState({ users: docs.map((doc) => doc.data()) });
      })
      .catch((err) => {
        console.log("caught error", error);
      });
  };

  useEffect(() => {
    getUserProfiles();
  }, []);

  console.log("state", state.users);
};

promise.all调用在从Firestore中提取每个用户后（也许您可以一次提取他们）就会解析。一旦有了用户，我们就用map对其进行循环，以提取文档的数据并设置状态。以下是async/await的替代方案：

const UsersScreen = (props) => {
  const [state, setState] = useState({
    users: [],
  });

  const getUserProfiles = async () => {
    try {
      const docs = await Promise.all(
        networkUsers.map((userID) => db.doc(userId).get())
      );

      setState({ users: docs.map((doc) => doc.data()) });
    } catch (err) {
      console.log("caught error", error);
    }
  };

  useEffect(() => {
    getUserProfiles();
  }, []);

  console.log("state", state.users);
};