Создать React App с TypeScript TS2322 ошибка с Context API + ловушка useState?

Question

У меня есть очень простой проект React Typescript, использующий Context API для передачи хука useState.

export const AppContext = React.createContext(null);

function App() {
  const [value, setValue] = React.useState(3);

  return (
    <AppContext.Provider
      value={{
        value,
        setValue
      }}
    >
      <div>
        <h1>App</h1>
        <Child />
      </div>
    </AppContext.Provider>
  );
}

Он отлично работает в песочнице кода: https://codesandbox.io/s/interesting-lamarr-fyy1b

Однако, когда я создаю проект с помощью приложения Create React (npx create-react-app project-name --typescript) и пробую тот же код, я получаю сообщение об ошибке:

Тип '{значение: число;setValue: Dispatch>;} 'нельзя присвоить типу' null '.TS2322

Я думаю, что это происходит, поскольку null является начальным значением для AppContext, но затем переопределяется value, передаваемым Provider?

Если это так, как я могу это исправить?Я предполагаю, один способ так расслабить настройки TypeScript?Однако существует ли более элегантный способ написания кода, который позволяет избежать этой проблемы?Я новичок в TypeScript и Context API, поэтому не уверен, что делаю один или оба незаметным способом.

Answer 1

Это не проблема Typescript. Все что вам нужно для работы, чтобы изменить эту строку:

export const AppContext = React.createContext(null);

к этой строке:

export const AppContext = React.createContext({});

---

P.s. и мой совет, перепишите ваш Child компонент с AppContext.Consumer как:

const Child = () => {
  return (
      <AppContext.Consumer>
        {({ value, setValue }) => (
          <div>
            <h2>{value}</h2>
            <button onClick={() => setValue(value + 1)}>Click</button>
          </div>
        )}
      </AppContext.Consumer>
  );
};

Answer 2

Вы пытались определить государство как

React.useState<number|null>