React渲染对象数组报错：对象不可作为React子元素

触发Objects are not valid as a React child的直接原因是代码里直接把整个商品对象放到了JSX中渲染：

<div>{Products[0]}</div>
<div>{Products[1]}</div>
<div>{Products[2]}</div>
<div>{Products[3]}</div>

接口返回的Products数组里的每一项都是包含id、title、price、image等属性的普通对象，React无法直接把对象渲染成DOM内容，所以直接抛错。

你提到尝试写Products[0].title还是不生效，本质是初始渲染空值报错：组件首次挂载时Products是你定义的空数组，此时Products[0]是undefined，直接读取undefined.title会先触发Cannot read properties of undefined的JS运行时错误，代码还没等到接口返回数据更新状态就已经崩溃了，自然看不到正常渲染的标题。

• 永远不要直接渲染整个对象，只渲染对象中原始类型（字符串、数字）的属性，比如title、price
• 渲染前做空值保护，避免初始状态下访问不存在的数组项抛错
• 不要硬编码数组下标，用Array.map遍历渲染列表，适配接口返回的任意数量商品

替换类名为jewelleryproducts的div区域内容即可：

<div className="jewelleryproducts">
  {Products.map(product => (
    <div key={product.id}>
      <p>{product.title}</p>
      <p>售价：${product.price}</p>
    </div>
  ))}
</div>

如果你只是想临时测试单个商品的title渲染，不想写遍历，加可选链做非空判断就行：

<div className="jewelleryproducts">
  <div>{Products[0]?.title}</div>
  <div>{Products[1]?.title}</div>
  <div>{Products[2]?.title}</div>
  <div>{Products[3]?.title}</div>
</div>

可选链操作符?.会在数组项不存在时返回undefined而不是抛错，等接口请求完成、Products状态更新后，页面会自动重渲染出对应的商品标题。

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