React、useState hook 的 createContext 默认值问题

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: () => {}会做，或者任何你想做的事情。