React报错Objects are not valid as a React child的解决及嵌套对象遍历方法

错误原因分析 #

你碰到的这个报错核心逻辑很明确：React没办法直接渲染纯JavaScript对象——它只认字符串、数字、React元素、数组（或者null/undefined这类空值）作为合法子元素。虽然你觉得{i.title}是字符串，但报错里提到的object with keys {itemss}说明你的代码里肯定有某个地方直接渲染了名为itemss的对象，而非它的某个属性值。

举个常见的错误场景：你可能不小心写了

<div>{itemss}</div>

而不是你原本想写的

<div>{itemss.title}</div>

或者在遍历数组时出错，把整个数组对象直接丢进了JSX，而非遍历后渲染单个元素的属性。

针对你代码的修复方案 #

结合你的ShopItem组件代码，正确的数组遍历渲染方式应该是这样：

class ShopItem extends React.Component {
  render() {
    const items = [
      { link: 'first link', title: 'Emery NEM XF', price: '$950' },
      { link: 'second link', title: 'Pro Series', price: '$799' }
      // 其他商品数据...
    ];

    // 用map遍历数组，返回单个React元素
    return (
      <div className="shop-item-list">
        {items.map((item, index) => (
          <div key={index} className="single-item">
            <a href={item.link}>{item.title}</a>
            <span className="price-tag">{item.price}</span>
          </div>
        ))}
      </div>
    );
  }
}

⚠️ 注意：遍历数组时一定要给每个子元素加唯一的key属性，这里用index是临时方案，生产环境最好用每个商品的唯一标识（比如id字段）。

如何遍历嵌套对象 #

如果你的商品数据里有嵌套对象，比如：

const items = [
  { 
    link: 'first link', 
    title: 'Emery NEM XF', 
    price: '$950',
    specs: { brand: 'Emery', size: 'M', color: 'Navy' }
  }
];

要遍历specs这类嵌套对象，可以用Object.entries()把对象转成键值对数组，再用map渲染：

{items.map((item, index) => (
  <div key={index} className="single-item">
    <a href={item.link}>{item.title}</a>
    <span className="price-tag">{item.price}</span>
    <div className="item-specs">
      {/* 遍历嵌套的specs对象 */}
      {Object.entries(item.specs).map(([key, value]) => (
        <p key={key}>
          <strong>{key}:</strong> {value}
        </p>
      ))}
    </div>
  </div>
))}

Object.entries()会把对象转换成[键名, 键值]形式的数组，这样就能轻松遍历所有嵌套属性。如果只需要遍历键名或键值，也可以用Object.keys()或Object.values()。

快速排查小技巧 #

1. 全局搜索代码里的{itemss}（报错里的对象名），找到直接渲染它的位置，改成渲染它的具体属性
2. 检查所有JSX中的大括号表达式，确保里面的结果不是纯对象类型
3. 如果是数组渲染，确认你用了map（或其他遍历方法）返回单个React元素，而非直接把整个数组丢进JSX

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