我收到错误“未捕获的 TypeError：未定义不可迭代（无法读取属性 Symbol（Symbol.iterator））”。 无法找到解决方案

Question

const Header = () => {
const firebaseAuth = getAuth(app);
const provider = new GoogleAuthProvider();
const [{user}, dispatch] = useStateValue(); 

const login = async () =>{
    const {
        user: { refreshToken, providerData },
    } = await signInWithPopup(firebaseAuth, provider);
    dispatch({
        type: actionType.SET_USER,
        user: providerData[0],
    });
};

import React, { createContext, useContext, useReducer } from "react";
export const StateContext = createContext();
export const StateProvider = ({ reducer, initialState, children }) => (
  // initial state is already defined as user : null
  // children is basically our component
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
// Custome Hook
export const useStateValue = () => {
  useContext(StateContext);
};

I am using context api to create a data layer at the top of all components. But I am trying that when the user logged in the user information stored in a state and gets updated. But here I am getting an error at const [{user}, dispatch] = useStateValue();

Answer 1

The problem was in where useStateValue was defined. I actually mistakenly add curley braces while making a custom hook