Question

在带打字稿的React应用程序中，我想为组件创建一个上下文。如果不提供defaultValue，则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
});

使用useState挂钩进行反应，createContext默认值问题

2 个答案: