Блог

Главная - Вопросы по программированию - Ошибка React createContext и useReducer с неопределенным значением

Ошибка React createContext и useReducer с неопределенным значением

#reactjs #typescript #react-hooks

#reactjs #машинописный текст #реагирующие крючки

Вопрос:

У меня есть проект React typescript, над которым я работаю, и у меня возникли некоторые проблемы с контекстным 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>
 );
}

Я был бы очень признателен за любую помощь, которая может быть предоставлена. Заранее благодарю вас!

Комментарии:

1. Если я установлю тип контекста на any , как показано здесь: const AppContext: Context<any> = createContext([{} as AppContextSchema, {} as Dispatch<DispatchReturn>]);

Ответ №1:

Оказывается, это проблема либо с Typescript, @typscript-eslint / eslint-plugin, либо с @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

Надеюсь, это избавит кого-то от той же головной боли, которую это дало мне.