React，createContext 默认值问题与 useState 挂钩答案

【问题标题】：React, createContext default value problem with useState hookReact，createContext 默认值问题与 useState 挂钩
【发布时间】：2020-06-08 19:04:49
【问题描述】：

在我的带有 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;

【问题讨论】：

标签： reactjs typescript react-hooks react-context

【解决方案1】：

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

【讨论】：

谢谢，:)) 哈哈，根据我想的特别的类型

【解决方案2】：

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

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

【讨论】：