Create React App with TypeScript TS2322 error with Context API + useState hook？答案

【问题标题】：Create React App with TypeScript TS2322 error with Context API + useState hook?Create React App with TypeScript TS2322 error with Context API + useState hook？
【发布时间】：2019-06-25 08:13:55
【问题描述】：

我有一个超级简单的 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) 创建一个项目并尝试相同的代码时，我得到一个错误：

类型'{值：数字； setValue: 调度>; }' 不可分配给类型“null”。 TS2322

我认为这是因为null 是AppContext 的初始值，但随后被传递给Provider 的value 覆盖？

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

【问题讨论】：

标签： typescript create-react-app

【解决方案1】：

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

export const AppContext = React.createContext(null);

到这一行：

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

附：我的建议是，用AppContext.Consumer 重写您的Child 组件，例如：

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

【讨论】：

使用您的代码，我收到此错误：键入'{ value: number; setValue: Dispatch>; }' 不可分配给类型 'null'。 TS2322
@Evanss 你确定在你的代码export const AppContext = React.createContext(null); 中你将null 更改为{}

【解决方案2】：

您是否尝试过像这样定义状态

React.useState<number|null>

【讨论】：

如果我尝试这个编译失败。

【解决方案3】：

export const AppContext = createContext<any>(null);
function App() {
  const [value, setValue] = useState<number|null>(666);
  return (
    <AppContext.Provider value={[value,setValue]}>
      <div>
        {props.children}
      </div>
    </AppContext.Provider>
  );
}
//////////////////   some other file   /////////////////////////
import React {useContext} from 'react'
import {AppContext} from './YourAppContextFile'

const SomeFunction:React.FC =()=>{
   const[value,setValue]=useContext(AppContext);
   return(
      <div>
        {value}
      </div>
   )
}

【讨论】：