Реагировать на проблему createContext в Typescript? - PullRequest
Новая
       55

Реагировать на проблему createContext в Typescript?

0 голосов
/ 07 февраля 2019

Так что у меня очень странная проблема с React Context + Typescript.

Рабочий пример

В приведенном выше примере вы можете увидеть, что я на самом деле пытаюсь сделать.По сути, я управляю состоянием с помощью нового метода useContext, и он отлично работает.

Однако, когда я пытаюсь сделать это на своем боксе, он не может найти значения состояния, передаваемые через useReducer. 

export function AdminStoreProvider(props: any) {
const [state, dispatch] = useReducer(reducer, initialState);
// state.isAuth is avail here
// state.user is avail here
const value = { state, dispatch };
// value.state.isAuth is avail here
return (
    /* value does not contain state once applied to the value prop */
    <AdminStore.Provider value={value}>{props.children} 
    </AdminStore.Provider>
   );
}

Сообщение об ошибке: 

Type '{ state: { isAuth: boolean; user: string; }; dispatch: 
Dispatch<Actions>; }' is missing the following properties from type 
'IState': isAuth, user

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

Я использую VSCode 1.31

Мне удалось вывести это, если я изменил способ создания контекста из: 

export const AdminStore = React.createContext(initialState);

до 

export const AdminStore = React.createContext(null);

Свойство value больше не генерирует эту ошибку.

Однако теперь useContext возвращает ошибку: состояние не существует при нулевом значении.И то же самое, если я устанавливаю defaultState для контекста на {}.

И, конечно, если я 

React.createContext();

, тогда TS кричит о том, что defaultValue не предоставляется.

В песочнице все 3 версии создания объекта контекста работают нормально.

Заранее благодарим за любые советы.

1 Ответ

0 голосов
/ 13 февраля 2019

Появляется defaultValue значение для React.createContext, как ожидается, будет иметь тип: 

interface IContextProps {
  state: IState;
  dispatch: ({type}:{type:string}) => void;
}

Как только объект Context создан для этого типа, например, вот так: 

export const AdminStore = React.createContext({} as IContextProps);

Компонент Provider React больше не должен жаловаться на ошибку.

Вот список изменений:

admin-store.tsx

import React, { useReducer } from "react";
import { initialState, IState, reducer } from "./reducer";


interface IContextProps {
  state: IState;
  dispatch: ({type}:{type:string}) => void;
}


export const AdminStore = React.createContext({} as IContextProps);

export function AdminStoreProvider(props: any) {
  const [state, dispatch] = useReducer(reducer, initialState);

  const value = { state, dispatch };
  return (
    <AdminStore.Provider value={value}>{props.children}</AdminStore.Provider>
  );
}
...