«Объекты недействительны в качестве дочернего элемента React» при добавлении пользовательских данных в Firestore

Я хочу знать, как мы можем сохранить данные пользователя во время регистрации в Firestore.

import {
  createUserWithEmailAndPassword,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut,
} from "firebase/auth";
import { collection, setDoc, doc } from "firebase/firestore";
import React, { useContext, useEffect, useState } from "react";
import { auth, db } from "../firebaseConfig";

const AuthContext = React.createContext();

export const useAuth = () => {
  return useContext(AuthContext);
};

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  const signup = async (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password).then(
      (cred) => {
        setDoc(doc(collection(db, "users", cred.user.uid)), {
          name: "manan",
          city: "chd",
        });
      }
    );
  };

  const login = (email, password) => {
    return signInWithEmailAndPassword(auth, email, password);
  };

  const logout = () => {
    return signOut(auth);
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    login,
    signup,
    logout,
  };
  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
};



как видите, я создал AuthContext.js для всех функций. теперь, когда в signup() я не могу хранить пользовательские данные, соответствующие их UID... как я использовал

setDoc(doc(collection(db, "users", cred.user.uid)), {
          name: "manan",
          city: "chd",
});

а он вообще не работает выдает ошибку
ошибка:

Objects are not valid as a React child (found: object with keys {error}). If you meant to render a collection of children, use an array instead.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
18
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы используете как документ, так и коллекцию в качестве ссылки. вы должны использовать ссылку на документ только на setDoc

от:

setDoc(doc(collection(db, "users", cred.user.uid)), {
          name: "manan",
          city: "chd",
});

изменить на:

setDoc(doc(db, "users", cred.user.uid), {
          name: "manan",
          city: "chd",
});

Большое спасибо, приятель. это действительно сработало... :)

Manan Tandon 10.04.2022 18:47

Другие вопросы по теме