Question

我正在处理一个React打字稿项目，并且上下文API出现了一些问题。

我尝试将不同的类型传递给createContext方法，所有这些都按预期工作。但是，当我尝试使用useReducer挂钩时，出现以下错误：

Syntax error: Cannot read property 'map' of undefined (0:undefined)

我已经将默认值作为这样的空对象传递了（我感觉这是我收到错误的地方，但是此方法以前对我有用）：

const AppContext: Context<[AppContextSchema, Dispatch<DispatchReturn>]> = createContext<[AppContextSchema, Dispatch<DispatchReturn>]>([
    {} as AppContextSchema,
    {} as Dispatch<DispatchReturn>
]);

我有一种方法可以在提供程序中初始化AppContextSchema对象：

export const InitializeContext = (): AppContextSchema => {
    return {
        user: {
            ...
        },
    };
}

这是我已实现的减速器，该减速器已传递到useReducer钩子：

export type DispatchReturn = {
    [key: string]: User | string;
    type: string;
}

export const AppContextReducer = (state: AppContextSchema, payload: DispatchReturn): AppContextSchema => {
    switch (payload.type) {
        case UPDATE_USER:
            return {
                ...state,
                user: { ...(payload.user as User) }
            };
        default:
            return state;
    }
}

最后是将值传递给AppContext.Provider的地方：

function App() {
return (
    <AppContext.Provider value={useReducer(AppContextReducer, InitializeContext())}>
        <div className="App">
            ...
        </div>
    </AppContext.Provider>
 );
}

可以提供的任何帮助将不胜感激。预先谢谢你！

Answer 1

事实证明，这是Typescript，@ typscript-eslint / eslint-plugin或@ typescript-eslint / parser或两者一起使用的问题。

定义Context类型时实际上存在此问题。 Context是一个通用对象，需要一个元组作为参数。无论出于什么原因，当将元组作为参数传递给Context对象时，都会引发上述错误。这是导致错误的代码：

const AppContext: Context<[AppContextSchema, Dispatch<DispatchReturn>]> = ...

为了解决此问题，我将Typescript版本降级为3.9.7。

要解决此问题，我运行了以下命令：

npm uninstall typescript或yarn remove typescript
npm install typescript@3.9.7或yarn add typescript@3.9.7
rm package.lock或rm yarn.lock
rm -rf node_modules
npm install或yarn install

希望这可以使某人摆脱与我同样的头痛。

反应createContext和useReducer未定义值错误

1 个答案: