React - Object(...) 不是函数或其返回值不可迭代

Question

我有一个小的 React 钩子，它包装了一个类组件，我试图使用

useEffect

将状态从这个钩子传递到类，但我不断收到以下错误；

TypeError: Object(...) is not a function or its return value is not iterable

在下一行；

const [{}, dispatch] = useStateValue();

我在应用程序其他地方的另一个钩子中使用了同一行，所以我不确定为什么这个钩子会抛出这个特定的错误

这是完整的组件代码。

如果有人有任何想法为什么这可能行不通，我将非常感激听到他们的声音。

谢谢你。

组件

import React, { useEffect } from 'react';
import App from 'next/app';

import firebase from 'firebase';

import { useStateValue, StateProvider } from '../state';
import { firebaseConfig } from '../constants';
import { initialState, reducer } from '../reducer';

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

function AppWrapper(Component) {
    return function WrappedComponent(props) {
        const [{}, dispatch] = useStateValue();

        useEffect(() => {
            console.log('Moiunted');
            firebase.auth().onAuthStateChanged((user) => {
                dispatch({
                    type: 'userLogin',
                    currentUser: user
                })
            });
        }), [];
        return <Component {...props} />
    }
}

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props;

        return (
            <StateProvider
                initialState={initialState}
                reducer={reducer}
            >
                <Component {...pageProps} />
            </StateProvider>
        );
    }
}
export default AppWrapper(MyApp)

状态函数

import React, { createContext, useContext, useReducer } from 'react';

export const StateContext = createContext();

export const StateProvider = ({reducer, initialState, children}) => (
    <StateContext.Provider
        value={useReducer(reducer, initialState)}
    >
        {children}
    </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext);

Answer 1

首先，我认为你也有一个语法错误。因为依赖数组位于 useEffect 之外。

关于此错误：当您错误地解构返回值时，就会发生此错误。