reactjs - Context Api React 的问题

Question

我尝试使用Context Api来保存来自firebase api的用户数据，但是当我在组件Index中获取这些值时，它总是返回错误: 类型错误:对象不可迭代(无法读取属性 Symbol(Symbol.iterator))

下面是我的代码

在哪里创建上下文

import React, { createContext, useState } from "react";

const Context = createContext();

function AuthProvider({children}) {

  const [userLogin, setUserLogin] = useState({});

  return (
    <Context.Provider value={{ userLogin, setUserLogin }} >
      { children }
    </Context.Provider>
  );
}

export { Context, AuthProvider }

路线文件

 <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/cadastrar' element={<Register />} />
          <Route path='/recuperar-senha' element={<Recovery />} />
          <Route path='/anuncios' exact element={<Index />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>

在这里我使用 firebase 数据设置上下文

    const {setUserLogin} = useContext(Context);
    
      const { register, handleSubmit, formState: { errors } } = useForm();
    
      const onSubmit = data => {
    
        const auth = getAuth();
    
        signInWithEmailAndPassword(auth, data.email, data.password)
          .then((userCredential) => {
            const user = userCredential.user;
    
            setUserLogin({user});
    
            navigate('/anuncios');
          })
          .catch((error) => {
            let erroMessage = localizeErrorMap(error.code)
    
            Toast('error', erroMessage);
          })
      };

我想将数据保存在上下文 api 中，并能够获取例如下面的组件和其他组件

import React, {useContext} from "react";

import  { Context } from '../providers/auth';


export default function Index() {

  const [user, setUserLogin] = useContext(Context);
  //console.log(user);
  return (
    <h1>Logado {user}</h1>
  )
}

我在浏览器控制台中看到，当我单击该组件时，它通知问题出在以下行:const [user, setUserLogin] = useContext(Context);

Answer 1

您的上下文值为{ userLogin, setUserLogin }:

<Context.Provider value={{ userLogin, setUserLogin }}>

所以你不能将它解构为数组。使用 const { userLogin, setUserLogin } = useContext(Context) 代替:

export default function Index() {
  const { userLogin, setUserLogin } = useContext(Context);
  console.log(userLogin);
  ...