使用 useState 作为值时如何为反应上下文键入初始状态

Question

我最近看了 Jack Herrington 的 YouTube 视频，“掌握 React 上下文”，他在其中使用 useState 作为上下文提供程序的值。这让我觉得很有趣，但是当我尝试用打字稿做同样的事情时，我完全被如何输入初始状态难住了。

示例 JS 代码：

const CounterContext = createContext(null);

const CounterContextProvider = ({children}) => {
  return (
    <CounterContext.Provider value={useState(0)}>
      {children}
    </CounterContext.Provider>
}

使用null作为默认值是不可能的。我可以为 useState 定义正确的类型，但初始状态值会是什么样子？

Answer 1

useState(0)返回的值是[number, Dispatch<SetStateAction<number>>]类型的元组，其中Dispatch和SetStateAction是从react导入的。所以使用模拟默认值，它看起来像：

import { createContext, Dispatch, SetStateAction } from "react";

const CounterContext = createContext<
  [number, Dispatch<SetStateAction<number>>]
>([0, () => {}]);

使用 useState 作为值时如何为反应上下文键入初始状态

How to type the initial state for react context when using useState as value

typescript

reactjs

react-context