预期类型来自属性“value”，该属性在类型“IntrinsicAttributes & ProviderProps<IProductContext>”上声明

Question

我正在创建一个在线购物网站，并尝试为该项目使用 React Typescript，但是当我尝试使用 Contexts 时，当我尝试导出 Provider 值中的状态时，我无法解决此问题

谢谢你的帮助

错误

类型 '{ 产品：IProductItem[] | 不明确的; setProducts: React.Dispatch<React.SetStateAction<IProductItem[] | 未定义>>; }' 不可分配给类型“IProductContext”。对象文字只能指定已知属性，并且类型 '[IProductItem[], Dispatch<SetStateAction<IProductItem[]>>]'.ts(2322) index.d.ts(332, 9) 中不存在 'products'：预期类型来自属性“value”，该属性在“IntrinsicAttributes & ProviderProps”类型上声明

上下文代码

import * as React from 'react';
import { useQuery } from "react-query";





type IProductContext = [IProductItem[], React.Dispatch<React.SetStateAction<IProductItem[]>>];

export const ProductContext = React.createContext<IProductContext>([[], () => null]);


const ProductProvider: React.FC<{}> = ({children}: { children?: React.ReactNode }) => {


    //fetching products data from a public API
    const getProducts = async (): Promise<IProductItem[]> => 
    await (await fetch("https://fakestoreapi.com/products")).json();

    //Retrieve the data and status using UseQuery
    const {data, isLoading, error} = useQuery<IProductItem[]>('products', getProducts);

    const [products, setProducts] = React.useState<IProductItem[] | undefined>();


    if(!error){
        setProducts(data)
    }
    

    return (
        <ProductContext.Provider value={{products, setProducts}}>
            {children}
        </ProductContext.Provider>
    );

};

export default ProductProvider;


export function useProducts(){
    const context = React.useContext(ProductContext);

    if(!context) throw new Error('useProducts must be inside a ProductProvider.');

    return context;
}

类型：

interface IProductItem{
    id: number
    title: string
    description: string;
    category: string;
    image: string;
    price: number;
    quantity: number;
}

type ProductType = {
    items: IProductItem[]
    saveItem: (item: ICartItem) => void
    updateItem: (id: number) => void
    removeItem: (id: number) => void
} | undefined;

Answer 1

就我而言，该问题是由此错误之前的其他错误引起的。查看终端是否有在此错误之前的其他错误。通过修复前面的错误，这个问题就消失了。