createContext 问题中的 TypeScript答案

【问题标题】：TypeScript in createContext issuecreateContext 问题中的 TypeScript
【发布时间】：2022-01-14 15:35:48
【问题描述】：

在我的应用上我有这个：

const restaurantsArr = [{ name: McDonald, rating: 5 }]
const RestaurantContext = createContext();
const [restaurants, setRestaurants] = useState(restaurantsArr);

对于Provider，我想从useState 传递我的解构变量。

<Provider value={[restaurants, setRestaurants]} />

TS 对我大喊大叫，createContext 必须有价值，但如果我的createContext 有空数组，例如我有错误。

我应该如何创建接口ContextProps？

事实上，我有一个数组，其中包含另一个对象数组和一个函数。

我已经为此奋斗了几个小时，并且一直有警告和错误...

【问题讨论】：

这里有什么问题？您是否尝试过创建界面？
我在为 ContextProps 创建适当的接口时遇到问题
你需要努力解决问题。你想到了什么？
接口 ContextProps { 餐厅：{ 名称：字符串；评级：数量；描述：字符串； }[]; setRestaurants: () => 无效； } 出口 const RestaurantsContext = createContext([]);但它不起作用......
您需要为您的上下文设置一个默认值，参考：github.com/DefinitelyTyped/DefinitelyTyped/pull/… 但因为这有时会很尴尬，请参阅kentcdodds.com/blog/how-to-use-react-context-effectively 了解处理此问题的好方法。

标签： javascript reactjs typescript create-react-app typing

【解决方案1】：

好的，我现在有这个：

export const RestaurantsContext = createContext<any>([]);

interface Props {
    children: ReactElement;
}

const RestaurantsProvider: React.FC<Props> = ({children}) => {
const [restaurants, setRestaurants] = useState(restaurantsArr)

   return (
      <RestaurantsContext.Provider value={[restaurants, setRestaurants]}>
         {children}
      </RestaurantsContext.Provider>
    )

但它只是在出口const RestaurantsContext = createContext<any>([]) 上随便走走。

我想做的是有类似的东西：

interface ContextProps {
   //and something here
}

但是我应该如何输入 [data, setData] ？它是一个包含对象数组和 setState 函数的数组。

【讨论】：