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

Question

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

感谢您帮助

错误

类型"｛products:IProductItem[]| undefined；setProducts:React.Dispatch<React.StateAction<IProductItem[]|undefined>>；｝"不可分配给类型"IProductContext"。对象文字只能指定已知属性，并且"products"不存在于类型"[IProductItem[]，Dispatch<SetStateAction<IProductItem[]>gt；]'。ts(2322(index.d.ts(332，9(：所需的类型来自属性"value"，该属性在类型"IntrnsicAttributes&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

在我的例子中，这个问题是由这个错误之前的其他错误引起的。查看终端是否存在此错误之前的其他错误。通过修复前面的错误，此问题消失了。

Answer 2

所以已经很少有备注了，

• 您的上下文需要一个IProductItem[]和React.Dispatch<React.SetStateAction<IProductItem[]>的数组

从你在这里所做的事情来看const [products, setProducts] = React.useState<IProductItem[]>();您可以看到，没有为初始化程序提供任何值。这意味着产品将是undefined

• 其次，当您期望一个数组时，您正在向提供程序提供一个对象，这也会导致错误

要解决这个问题，这里有适合您的解决方案：

import * as React from 'react';
import { useQuery } from "react-query";
interface IProductItem {}
// From the code below you can see that the values can be undefined as well
type IProductContext = [IProductItem[] | undefined, React.Dispatch<React.SetStateAction<IProductItem[] | undefined>>];
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, error} = useQuery<IProductItem[]>('products', getProducts);
// As explained in the commend at the top, the value are not initialised, therefore they can be undefined
const [products, setProducts] = React.useState<IProductItem[] | undefined>();

if(!error){
setProducts(data)
}

// You was giving an object while you did expect an array
return (
<ProductContext.Provider value={[products, setProducts]}>
{children}
</ProductContext.Provider>
);
};
export default ProductProvider;

希望这个答案能帮助你，如果不是，不要犹豫：(