使用 React Hooks 和 Context 检查电子邮件是不是已经存在于 Firestore 的集合中

Posted 2023-04-14

【中文标题】使用 React Hooks 和 Context 检查电子邮件是不是已经存在于 Firestore 的集合中

【英文标题】：Check if an email is already present within a collection in Firestore, with React Hooks and Context使用 React Hooks 和 Context 检查电子邮件是否已经存在于 Firestore 的集合中

【发布时间】：2021-10-15 20:06:37

【问题描述】：

我一直在寻找适合我的用例的解决方案，但之前找到的解决方案都不适合我。

我有一个 EditorsContext，我想在其中接收来自 Firestore 编辑器集合的编辑器列表，并且我想检查正在登录应用程序的用户的电子邮件是否已经存在于编辑器中，如果没有订阅他默认值。

我的上下文如下所示：

    export const EditorsContext = createContext();
    
    const EditorsProvider = (props) => 
      const [editors, setEditors] = useState([]);
      const [loading, setLoading] = useState(true);
    
      useEffect(() => 
        const getEditors = async () => 
          const db = firebase.firestore();
          const editors = await db
            .collection("editors")
            .get()
            .then((querySnapshot) => 
              querySnapshot.forEach((doc) => 
                const data = doc.data();
                setEditors((arr) => [...arr, data]);
              );
            );
        ;
        getEditors();
        setLoading(false);
    
      , []);
...

我的组件看起来像这样：

    function MainScreen() 
      const  editors, loading  = useContext(EditorsContext);
      const [newEditor, setNewEditor] = useState([]);
    ...
      const CreateUserRoles = async () => 
        const currentUserEmail = await firebase.auth().currentUser.email;
        const editorsEmails = await editors.map((editor) => editor.email);
        console.log("entered createUserRoles");
        console.log("current from the fucntion " + currentUserEmail);
        console.log("editors from the function " + editorsEmails);
    
        if (await editorsEmails.includes(currentUserEmail)) 
          console.log("the editor already exists");
         else if ((await editorsEmails.length) <= 0) 
          console.log("there are no editors, collection will be initialized");
          const editorsRef = firebase.firestore().collection("editors");
          const editor = 
            email: currentUserEmail,
            role: "reviewer",
            lastSession: dateOutput,
          ;
          await editorsRef.add(editor);
          await setNewEditor(newEditor);
          console.log("collection initiated successfully" + newEditor);
         else 
          console.log("creating new editor");
          const editorsRef = firebase.firestore().collection("editors");
          const editor = 
            email: currentUserEmail,
            role: "reviewer",
            lastSession: dateOutput,
          ;
          await editorsRef.add(editor);
          await setNewEditor(newEditor);
          console.log("editor added successfully" + newEditor);
        
        
    
      useEffect(() => 
        if (!loading) 
          if (editors.lenght !== 0) 
            console.log("editors arrived");
            console.log(editors.length);
           else 
            console.log("no editors yet. check the provider");
          
         else 
          console.log("loading");
        
      , [loading]);
....

我很确定我的问题是由于 useEffect 触发了该函数，即使我的 editors 数组为空（我也尝试使用：if(editors.length !== 0)）。有人对此有任何想法或解决方案吗？ 谢谢！

【问题讨论】：

你的错误到底是什么？

我遇到的问题是，由于我的 editors 数组一开始是空的，我的函数被触发并且第二个条件 (editorsEmails.length

您在 ` if (editors.lenght !== 0)` 中有错字。长度拼写错误。

您可能还需要将editors 添加到您的useEffect 依赖数组中。

不幸的是，我一直得到相同的结果，但感谢您指出错别字，肯定是坐太久了:)

【参考方案1】：

尝试将editors 添加到您的 useEffect 数组中。

  useEffect(() => 
    if (!loading) 
      if (editors.length !== 0) 
        console.log("editors arrived");
        console.log(editors.length);
       else 
        console.log("no editors yet. check the provider");
      
     else 
      console.log("loading");
    
  , [loading, editors]);

【讨论】：

是的，我也试了一下，但我一直在重复，因为在第一个渲染编辑器