代码之家 › 专栏 › 技术社区 › Álvaro

自定义上下文钩子类型脚本

react-context typescript reactjs

1

Álvaro · 技术社区 · 4 年前

我得到一个错误,当使用一个简单的数字状态,理想情况下,我会有一个更有意义的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>
  )
}

1 回复 | 直到 4 年前

1

Dennis Vash 4 年前

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

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