Реагируйте на контекст «Свойство« состояние »не существует» при использовании useContext () на получателе контекста

Question

Я пытаюсь реализовать контексты в моем проекте React. Каждый раз, когда я пытался реализовать этот контекст, я получал одну и ту же ошибку:

Property 'state' does not exist on type '{ count: number; currentColor: string; }'.

  > 40 |   let { state, dispatch } = React.useContext(ContextOne);
       |         ^

Код провайдера контекста:

import * as React from "react";

let ContextOne = React.createContext(initialState);

let initialState = {
  count: 10,
  currentColor: "#bada55"
};

let reducer = (state, action) => {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    case "set-color":
      return { ...state, currentColor: action.payload };
  }
};

function ContextOneProvider(props) {
  let [state, dispatch] = React.useReducer(reducer, initialState);
  let value = { state, dispatch };


  return (
    <ContextOne.Provider value={value}>{props.children}</ContextOne.Provider>
  );
}

let ContextOneConsumer = ContextOne.Consumer;

export { ContextOne, ContextOneProvider, ContextOneConsumer };

Я пробовал множество примеров онлайн провайдеров контекста, но каждый раз использовалContext () вызывается, появляется та же ошибка. Что нужно изменить, чтобы контекст работал?

--------------------------------- ---------Редактировать---------------------------------------- -

Благодаря соевому дереву, вот рабочий код поставщика контекста:

import * as React from "react";

type State = {
  count: number
  currentColor: string
}

const initialState: State = {
  count: 10,
  currentColor: "#bada55",
};

type Context = {
  state: State
  dispatch: React.Dispatch<Action>
}

type Action = {
  type: string,
  payload: string
}
const ContextOne = React.createContext<Context>({
  state: initialState,
  dispatch: () => {},
});

// You need to define the type Action
const reducer: React.Reducer<State, Action> = (state, action) => {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    case "set-color":
      return { ...state, currentColor: action.payload };
  }
};

function ContextOneProvider(props) {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const value: Context = { state, dispatch };

  return (
    <ContextOne.Provider value={value}>{props.children} </ContextOne.Provider>
  );
}

let ContextOneConsumer = ContextOne.Consumer;

export { ContextOne, ContextOneProvider, ContextOneConsumer };

Answer 1

Тип параметра createContext должен соответствовать вашему типу значения ContextOne.Provider. Вы также должны улучшить свои типы, чтобы лучше руководствоваться компилятором TypeScript:

import * as React from "react";

type State = {
  count: number
  currentColor: string
}

const initialState: State = {
  count: 10,
  currentColor: "#bada55",
};

type Context = {
  state: State
  dispatch: React.Dispatch<State>
}

const ContextOne = React.createContext<Context>({
  state: initialState,
  dispatch: () => {},
});

// You need to define the type Action
const reducer: React.Reducer<State, Action> = (state, action) => {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    case "set-color":
      return { ...state, currentColor: action.payload };
  }
};

function ContextOneProvider(props) {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const value: Context = { state, dispatch };

  return (
    <ContextOne.Provider value={value}>{props.children} </ContextOne.Provider>
  );
}

let ContextOneConsumer = ContextOne.Consumer;

export { ContextOne, ContextOneProvider, ContextOneConsumer };

Answer 2

Ваша проблема в том, что вы предоставляете начальное состояние своему провайдеру контекста, который имеет свойства count и currentColor, а значение (новое состояние), которое вы указываете в ContextOneProvider, имеет свойства state и dispatch.

Я предполагаю, что вы захотите поменять initialState на что-то вроде:

{
  state: null,
  dispatch: null,
}

Если вы используете машинопись, вы можете захотеть предоставить интерфейс у которого есть те как дополнительные параметры.