React createContext无返回值函数的defaultValue如何正确定义？

对于用于传递无返回值函数的Context，最佳的默认值定义方式有两种，可根据需求选择：

方案1：空占位函数（简单直接） #

直接传入一个空函数作为默认值，满足TypeScript的语法要求即可。由于你已经在useUpdateTheme Hook中做了上下文有效性检查，正常使用场景下这个默认值不会被触发：

const ThemeUpdateContext = React.createContext(() => {})

方案2：抛出错误的函数（更严谨） #

如果想在意外未包裹ThemeProvider的场景下快速定位问题，可以定义一个调用时直接抛出错误的默认函数。这样即使有人误用，也能立刻得到明确的报错信息：

const ThemeUpdateContext = React.createContext(() => {
  throw new Error('ThemeUpdateContext must be used within ThemeProvider')
})

修改后的完整代码 #

import React, { useState, useContext, ReactNode } from 'react'

const ThemeContext = React.createContext(true)
// 替换为上述任意一种方案即可
const ThemeUpdateContext = React.createContext(() => {
  throw new Error('ThemeUpdateContext must be used within ThemeProvider')
})

export const useTheme = () => {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    throw Error('ThemeContext must be within ThemeProvider')
  }
  return context
}

export const useUpdateTheme = () => {
  const context = useContext(ThemeUpdateContext)
  if (context === undefined) {
    throw Error('ThemeUpdateContext must be within ThemeProvider')
  }
  return context
}

const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const [darkTheme, setDarkTheme] = useState(true)

  const toggleTheme = () => {
    setDarkTheme((prev) => !prev)
  }

  return (
    <ThemeContext.Provider value={darkTheme}>
      <ThemeUpdateContext.Provider value={toggleTheme}>
        {children}
      </ThemeUpdateContext.Provider>
    </ThemeContext.Provider>
  )
}

内容的提问来源于stack exchange，提问作者Zarina Nugmanova