React 的 useState() setter 的 Typescript 类型

Question

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

我收到以下 Typescript 错误value（ColorModeContext我猜是因为这行接口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');