我收到此错误“未捕获错误：对象作为 React 子项无效”，即使我使用了对象数组怎么办

Question

`

const fashionCardData = [
  { id: "1", src: "1.png" },
  { id: "2", src: "2.png" },
  { id: "4", src: "4.png" },
];

const Products = () => {
  return (
    <Box>
      {fashionCardData.map((item)=>{
        <img key={item.id} src={`images/${item.src}`} alt={item.id}/>
      })}
    </Box>
  );
};

`

我正在尝试映射一个数组，但它不起作用请帮忙

Answer 1

代替

{fashionCardData.map((item)=>{
    <img key={item.id} src={`images/${item.src}`} alt={item.id}/>
  })}

和

{fashionCardData.map((item)=>(
    <img key={item.id} src={`images/${item.src}`} alt={item.id}/>
  ))}

Answer 2

问题是您没有退回组件。

将您的代码更改为

{fashionCardData.map((item)=>{
    return (<img key={item.id} src={`images/${item.src}`} alt={item.id}/>);
  })}

{}内的代码将被视为 javascript，类似地， ()内的代码将被视为 jsx。