Question

我正在使用上下文共享value钩子中的setValue和useState。下面的代码有效，但似乎过于冗长。我是TypeScript的新手，所以我希望有一种更优雅的书写方式？

为initState设置一个默认值是毫无意义的，因为它会被覆盖，但是如果我没有传递默认值，则createContext会出错。

interface IContext {
  value: number;
  setValue?: any;
}

const initState: IContext = {
  value: 2
};

export const AppContext = createContext(initState);

const App: React.FC = () => {
  const [value, setValue] = useState<number>(2);

  return (
    <AppContext.Provider
      value={{
        value,
        setValue
      }}
    >
      <Stugg />
    </AppContext.Provider>
  );
};

Answer 1

TypeScript只是强迫您遵守合同，createContext期望 some 的初始价值，如果它是JS以外的其他语言，您也会发现如果不提供，则会引发编译器错误。

如果您遵循以下路线，我不会期望出现错误：

export const AppContext = createContext<Partial<IContext>>(null as IContext);

在TypeScript中使用useState的React Context即使没有意义也需要initialState吗？

1 个答案: