React， createContext 默认值问题与 useState 钩子

Question

在我使用 TypeScript 的 React 应用程序中，我想为组件创建一个上下文。如果未提供默认值，createContext将显示错误。我想传递的值之一是钩子调度程序的setFilters。我应该如何提供默认值？

另外，我不希望它是可选的，以防止!调用。

export interface ContextProps {
filters: FiltersType;
setFilters: React.Dispatch<React.SetStateAction<FiltersType>>;
}

export const MyContext = React.createContext<ContextProps>({
filters: defaultFilters, // imported from constants holder
setFilters: // <---- What should be here?
});

const FiltersContext: React.FC<IProps> = (props: IProps) => {
const [filters, setFilters] = React.useState<FiltersType>(defaultFilters);

return <MyContext.Provider value={{ filters, setFilters }}>{props.children}</MyContext.Provider>;
};

export default FiltersContext;

Answer 1

当没有可用的上下文提供程序时，将使用默认值，因此这取决于在这种情况下要执行的操作。你可以抛出一个错误，然后使用setFilters: () => { throw new Error('No FiltersContext available'); }，或者静默地忽略它，然后setFilters: () => {}会做，或者你想做的任何事情。

Answer 2

您可以只使用一个简单的函数作为其默认值，如下所示：

export const MyContext = React.createContext<ContextProps>({
filters: defaultFilters, // imported from constants holder
setFilters: () => null
});