使用 Context API + useState hook 创建带有 TypeScript TS2322 错误的 React App？

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 App ( npx create-react-app project-name --typescript)创建项目并尝试相同的代码时，出现错误：

输入'{值：数字；设置值：调度>；}' 不可分配给类型 'null'。TS2322

我认为这正在发生，因为 null它的初始值是，AppContext但随后被value传递给Provider?

如果是这种情况，我该如何解决？我假设一种方法是放松 TypeScript 设置？但是，有没有更优雅的代码编写方式可以避免这个问题？我是 TypeScript 和 Context API 的新手，所以不确定我是否以一种不明智的方式做一个或两个。

Answer 1

这不是打字稿问题。你们所有人都需要努力改变这一行：

export const AppContext = React.createContext(null);

到这一行：

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

Ps 和我的建议，Child用AppContext.Consumer如下方式重写你的组件：

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