Question

我有一个使用Context API传递useState挂钩的超简单React Typescript项目。

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的初始值，但是随后被传递给value的{{1}}覆盖了呢？

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

Answer 1

您是否试图像

那样定义状态？

React.useState<number|null>

？

Answer 2

这不是打字稿问题。所有人都需要工作来更改此行：

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 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>
   )
}

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

3 个答案: