Question

我正在使用Reactjs，数据库是Firebase。

我正在尝试从数据库中检索数据，然后检查有关它的数据。

在顶部，我有const [group, setGroup] = useState(null);作为组数据。在我的CheckGroupRelationship函数中，是否使用组对象数据检查数据库。

最初，我在数据库调用后调用了该函数：

  const GetGroupInfo = async (uid) => {
    await props.firestore
      .collection("groups")
      .doc(uid)
      .get()
      .then(async (doc) => {
        if (!doc.exists) {
          console.log("No such document!");
        } else {
          setGroup({
            id: doc.data().id,
            ownerID: doc.data().ownerID,
            name: doc.data().name,
          });
        }
      })
      .catch((err) => {
        console.log("Error getting document", err);
      });
      CheckGroupRelationship();
  };

但是，我会收到错误“组为空”。所以我将调用的函数移到了setState：

  const GetGroupInfo = async (id) => {
    await props.firestore
      .collection("groups")
      .doc(id)
      .get()
      .then(async (doc) => {
        if (!doc.exists) {
          console.log("No such document!");
        } else {
          setGroup(
            {
              id: doc.data().id,
              ownerID: doc.data().ownerID,
              name: doc.data().name,
              bio: doc.data().bio,
            },
            CheckGroupRelationship()
          );
        }
      })
      .catch((err) => {
        console.log("Error getting document", err);
      });
  };

这仍然会导致“组为空”错误。我不确定在设置状态后如何才能使该函数被调用。

Answer 1

简单的解决方案是使用useEffect。您可以这样做：

const [group, setGroup] = useState(null);
useEffect(() => {
  if (group) {
    CheckGroupRelationship()
  }
}, [group])

useEffect在这里所做的是等待group进行更改，更改后它将调用内部回调。在这种情况下，您将在那里更新组。希望能有所帮助，欢呼

状态更改前调用了我的函数

1 个答案: