React 的 useState() setter 的 Typescript 类型

Question

我正在尝试创建 React Context，其中参数 mode 和 setMode 是 React 状态的 getter 和 setter。这是为了能够从子组件更新 css 模式（亮/暗）。

我收到 ColorModeContext 的 value 的 Typescript 错误（我猜，因为这行接口 AppContextInterface 不正确：setMode: (c: string) => void):

function App() {

    interface AppContextInterface {
        mode: string;
        setMode:(c: string) => void
    }

    const ColorModeContext = React.createContext<AppContextInterface>({
        mode: 'dark', // set a default value
        setMode: () => {},
    })

    const [mode, setMode] = React.useState<PaletteMode>('dark');

    // Update the theme only if the mode changes
    const theme = React.useMemo(() => createTheme(getTheme(mode)), [mode]);

    return (
        <ColorModeContext.Provider value= {{ mode, setMode }}>
            <ThemeProvider theme={theme}>
                <div>
                    </ChildComponent>
                </div>
            </ThemeProvider>
        </ColorModeContext.Provider>
    );
}
export default App;

我该如何修复它？谢谢

Answer 1

由于您的 useState 类型被定义为 PaletteMode，因此您需要在上下文的界面中定义相同的内容。此外，您还可以使用与定义 setState 操作相同的类型（可以从 React 导入）：

import { useState, createContext, Dispatch, SetStateAction} from 'react';

interface AppContextInterface {
  mode: PaletteMode;
  setMode: Dispatch<SetStateAction<PaletteMode>>
}

function App() {
  const ColorModeContext = createContext<AppContextInterface>({
      mode: 'dark', // set a default value
      setMode: () => {},
  })

  const [mode, setMode] = useState<PaletteMode>('dark');