自定义上下文挂钩 TypeScript答案

【问题标题】：Custom context hook TypeScript自定义上下文挂钩 TypeScript
【发布时间】：2021-03-10 12:23:25
【问题描述】：

我正在尝试使用基于这种有趣方法todos-many-ways 的上下文 API 的自定义钩子

我在使用简单状态的数字时遇到错误，理想情况下我会有一个更有意义的 setter 函数，但我只是在设置它时遇到错误。

import * as React from 'react'

const mainState = () => {
  const [edit, setEdit] = React.useState<number | null>(null)

  return {
    edit,
    clear: () => setEdit(null)
  }
}

const MainContext = () => React.createContext<ReturnType<typeof mainState> | null>(null)

// I get an error on `MainContext`: `...is not assignable to parameter of type 'Context<unknown>`
export const useMainContext = () => React.useContext(MainContext)

export function MainProvider({children}: {children: React.ReactNode}){
  return (
    <MainContext.Provider value={mainState()}>
      {children}
    </MainContext.Provider>
  )
}

【问题讨论】：

为什么不MainContext = React.createContext，你为什么要传一个函数？
天哪，我觉得自己好蠢，非常感谢

标签： reactjs typescript react-context

【解决方案1】：

尝试传递值而不是声明函数：

const MainContext = React.createContext<ReturnType<typeof mainState> | null>(null)

【讨论】：