无法在反应中将数据从表单发送到 firestore 数据库

Question

这是我第一次使用 firestore，我有一个注册表单来发送用户名 email，使用 firebase 身份验证注册用户的密码。 问题是在创建用户后我想创建一个用户名来链接到该用户。 通过下面的方法，我得到了错误：

警告：无法对未安装的组件执行 React state 更新。 这是一个空操作，但它表明您的应用程序中存在 memory 泄漏。 要修复，请取消 useEffect 清理中的所有订阅和异步任务 function。

我的用户未注册。 如果没有向 firestore 添加用户名，我的用户已成功创建，但似乎在尝试注册时出现 memory 泄漏，我不明白为什么，我需要一个我不知道如何实施的清理 function。

我的代码：

import React, { createContext , useContext ,useState , useEffect} from 'react'
import {auth} from '../firebase';
import firebase from 'firebase/app';

const AuthContext = createContext();

export function AuthProvider({children}) {
 
  const [user,setUser] = useState('');
  const [loading,setLoading] = useState(true);

  function signup(email,password,username){ //this is where my error lies while trying to insert user to firestore collection of users 
    return ()=> { 
      auth.createUserWithEmailAndPassword(email,password)
      .then(()=>{
          firebase.firestore().collection('users').add({
           userName:username
         })
      })
      
    };
  }

  function signin(email,password){
    return auth.signInWithEmailAndPassword(email,password);
  }

  function logout(){
    return auth.signOut();
  }

  useEffect(() => {
   
    const unsubscribe = auth.onAuthStateChanged(user=>{
      setUser(user);
      setLoading(false);
    })

    return unsubscribe;
    //how can I use cleanup function here ? 
  }, []);
  
  const info = {
    user,
    signin,
    signup,
    logout
  }

  return (
    <AuthContext.Provider value = {info}>
      {!loading && children}
    </AuthContext.Provider>
  )
  
}

  export function useAuth(){
   return useContext(AuthContext);
  } 

Answer 1

我建议将上下文和 firestore 调用分开，看一个例子：

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  useEffect(() => {
    app.auth().onAuthStateChanged((user) => {
      setCurrentUser(user)
      setPending(false)
    });
  }, []);

  const userContext = {
    currentUser,
  };

  if(pending){
    return <>Loading...</>
  }

  return (
    <AuthContext.Provider
      value={
        userContext
      }
    >
      {children}
    </AuthContext.Provider>
  );
};

并在 Firebase.js 中使用：

const db = firebase.firestore();
const usersRef = db.collection('users');

export const doCreateUserWithEmailAndPassword = async (pEmail, pPassword, pUsername) => {
    const authResult = await app.auth().createUserWithEmailAndPassword(pEmail, pPassword);
    usersRef.doc(authResult.user.uid)
        .set({
            created: firebase.firestore.FieldValue.serverTimestamp(),
            email: pEmail,
            username: pUsername,
        });
}