React createContext和useReducer未定义值错误

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钩子的reducer:

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插件或@Typescript eslint/parser的问题，或者这三者的组合一起使用的问题。

在定义Context类型时实际上存在此问题。Context是一个期望元组作为参数的泛型对象。无论出于何种原因，当将元组作为传递给Context对象的参数时，它都会抛出上述错误。以下是导致错误的代码：

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

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

为了解决这个问题，我运行了以下命令：

1. npm uninstall typescript或yarn remove typescript
2. npm install typescript@3.9.7或yarn add typescript@3.9.7
3. rm package.lock或rm yarn.lock
4. rm -rf node_modules
5. npm install或yarn install

希望这能让我摆脱同样的头痛。