首页 > 解决方案 > 从 firebase 获取价值并在 useState React native 中使用它

问题描述

首先,用户通过单击切换按钮来选择他的过敏症。如果状态是 true 或 false,则状态正在成功添加到 firebase。

过敏选择器页面

然后在我的主页中,我想检索该过敏状态并将其应用于主页上的过敏列表状态。 主页图片

我可以使用这个从firebase获取状态值

  useEffect(() => {
    firebase
      .firestore()
      .collection("userDb")
      .where("userId", "==", user.email)
      .onSnapshot(
        (querySnapshot) => {
          const newTypes = [];
          querySnapshot.forEach((doc) => {
            const type = doc.data();
            newTypes.push(type);
          });

          setTypes(newTypes[0].Dairy);
setStatus(type);
        },
        (error) => {
          console.log(error);
        }
      );
  }, []);


useEffect(() => {
    const fetchFav = async () => {
      try {
        const list = [];
        await firebase
          .firestore()
          .collection("userDb")
          .get()
          .then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              const { Dairy, Peanut } = doc.data();
              list.push({
                userid: doc.id,
                dairy: Dairy,
                peanut: Peanut,
              });
            });
          });
        setPosts(list);
        if (loading) {
          setLoading(false);
        }
      } catch (e) {
        console.log(e);
      }
    };
    fetchFav();

    searchApi(term);
  }, []);

但我不知道如何将其应用于我的州。我想在状态(类型)中使用类型,它在我控制台日志时获取实际的真/假值,它从 firebase 获取正确的值,但由于某种原因,它在状态(类型)中始终为真;

const [status, setStatus] = useState(type);

          <Button
          onPress={() => setStatus(!status)}
          title={`Prevent Dairy: ${
            status ? "on (search again for new results)" : "off"
          }`}
          ></Button>

我希望它是动态的,因为用户可以改变他的过敏,所以我没有使用 route.params 来处理过敏。

任何想法表示赞赏。谢谢。

标签: firebasereact-nativegoogle-cloud-firestore

解决方案


推荐阅读