无法将数据从表单发送到Firestore数据库

debugcn 发表于 Dev

瓦西里123

这是我第一次使用Firestore，我有一个注册表单，用于发送用户名，电子邮件和密码，以使用Firebase身份验证注册用户。问题是创建用户后，我想创建一个用户名以链接到该用户。通过下面的方法，我得到了错误：

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消使用useEffect清理功能中的所有订阅和异步任务。

并且我的用户尚未注册。在Firestore中没有添加用户名的情况下，成功创建了我的用户，但似乎在尝试注册时出现内存泄漏，我不明白为什么，并且我需要一个不知道如何实现的清除函数。

我的代码：

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);
  }

实时性

我建议将上下文和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,
        });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。