React报错'Uncaught Error: Objects are not valid as a React child'及数组映射失效求助

你的代码核心问题是数组map的回调函数没有返回<img>元素，导致map最终返回的是一个全为undefined的数组。React尝试渲染这些undefined时，就会抛出"Objects are not valid as a React child"的错误。

修复方法有两种： #

方法1：在回调函数中显式添加return

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元素
        return <img key={item.id} src={`images/${item.src}`} alt={item.id} />;
      })}
    </Box>
  );
};

方法2：使用箭头函数的隐式返回（替换大括号为小括号）

箭头函数中，如果直接用小括号包裹JSX，会自动返回该内容，无需写return：

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>
  );
};

补充说明： #

React要求渲染的子元素必须是有效的React节点（比如JSX元素、字符串、数字，null/undefined单独出现时没问题，但数组里全是undefined就会触发报错）。你的原代码中，map回调用了大括号但没写return，所以每一次迭代都没有返回值，最终生成的数组无法被React正常渲染。

内容的提问来源于stack exchange，提问作者Pratik Shinde