我試圖通過道具傳遞物件陣列，但我得到了那個錯誤：
（屬性）圖片：[圖片]
型別“[影像]”不可分配給型別“字串”.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;
uj5u.com熱心網友回復：
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>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442522.html
上一篇：C：Windows沒有找到HARDWARE\DEVICEMAP\SERIALCOMM，即使可以使用regedit找到它
下一篇：嵌套動態物件的打字稿回傳型別