类型"[图像]"不能分配给类型"字符串".ts(2322)

Question

我试图通过道具传递对象数组，但我得到了错误：

(属性(图像：〔图像〕

类型"[Images]"不可分配给类型"string"。ts(2322(

ProductBlock.tsx(4，5(：期望的类型来自此索引签名。

这是我的区块：

interface Images {
[key: string]: string;
}
interface Colors {
[key: string]: string;
}
interface Product {
_id: string;
name: string;
description: string;
price: number;
colors: [string];
images: [Images];
type: string;
likes: number;
}
const ProductBlock = (product: Product) => {
console.log(product.images); // [{...}]
const RenderColors = () => {
}

const RenderImages: React.FC<Images> = (images: Images) => {
console.log(images);
return(
<>

</>
)
}
return (
<div className="product product-container" key={product._id}>
<RenderImages images={product.images}/> //<--- Error here at "images="
<h3 className="product-title">{product.name}</h3>
</div>
)
}
export default ProductBlock;

Answer 1

product.images是images对象的数组，但您将其传递给RengerImages，后者将单个images对象作为参数。

试试这个：

const ProductBlock = (product: Product) => {
console.log(product.images); // [{...}]
const RenderColors = () => {
}

const RenderImages: React.FC<{ images: [Images] }> = ({ images }) => {
console.log(images);
return(
<>

</>
)
}
return (
<div className="product product-container" key={product._id}>
<RenderImages images={product.images}/> 
<h3 className="product-title">{product.name}</h3>
</div>
)
}