React Typescript Context-映射对象出现问题

Question

映射对象时出错。我花了几个小时试图解决这个问题，但我不知道我做错了什么：(

错误：

const categoriesMap: {
item: Product[];
}
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ item: Product[]; }'.
No index signature with a parameter of type 'string' was found on type '{ item: Product[]; }'.ts(7053)

shop.component.tsx错误来自{categoriesMap[title].map}

const Shop: React.FC = () => {
const { categoriesMap } = useContext(CategoriesContext);
console.log(categoriesMap);
return (
<Fragment>
{Object.keys(categoriesMap).map((title) => {
console.log(title);
return (
<Fragment key={title}>
<h2>{title}</h2>
<div className={classes["products-container"]}>
{categoriesMap[title].map((product: any) => (
<ProductCard key={product.id} product={product} />
))}
</div>
</Fragment>
);
})}
</Fragment>
);
};
export default Shop;

categories.context.tsx类型为"｛｝"的参数不可分配给类型为"ShopData|((=>带有useState(｛｝(的行上的ShopData('.ts(2345(错误

interface AppContextInterface {
// [key: string]: [] | Array<[]>
[categoriesMap: string]: {
item: Product[];
};
}
export const CategoriesContext = createContext<AppContextInterface>(
{} as AppContextInterface
);
export const CategoriesProvider = ({ children }: { children: ReactNode }) => {
const [categoriesMap, setCategoriesMap] = useState<ShopData>({});
useEffect(() => {
const getCategoriesMap = async () => {
const categoryMap = await getCategoriesAndDocuments();
setCategoriesMap(categoryMap);
};
getCategoriesMap();
}, []);
const value = { categoriesMap };
return (
<CategoriesContext.Provider value={value}>
{children}
</CategoriesContext.Provider>
);
};

商店数据.ts

export interface Product {
id: number;
name: string;
imageUrl: string;
price: number;
}
export interface ShopData {
title: string;
items: Product[];
}

我将感谢任何帮助！

Answer 1

我认为问题在于useState<ShopData>({})期望初始使用状态为ShopData。

店铺数据为：

export interface ShopData {
title: string;
items: Product[];
}

因此，useState<ShopData>({})中的对象{}不是类型ShopData。

Answer 2

我已经自己修复了这个错误。我想我无论如何都会发布它。它可以帮助未来的某个人：

categories.context.tsx

export const CategoriesContext = createContext<ShopData>({} as ShopData);
export const CategoriesProvider = ({ children }: { children: ReactNode }) => {
const [categoriesMap, setCategoriesMap] = useState<ProductObject>({});
useEffect(() => {
const getCategoriesMap = async () => {
const categoryMap = await getCategoriesAndDocuments();
setCategoriesMap(categoryMap);
};
getCategoriesMap();
}, []);
const value = { categoriesMap };
return (
<CategoriesContext.Provider value={value}>
{children}
</CategoriesContext.Provider>
);
};

商店数据.ts

export interface Product {
id: number;
name: string;
imageUrl: string;
price: number;
}
export interface ProductObject {
[title: string]: Product[];
}
export interface ShopData {
categoriesMap: ProductObject;
}

我把代码分解成了很小的部分，并使用了很多类型的运算符，这对我很有帮助。无论如何，感谢您关注这个问题！