React渲染对象数组报错：Objects are not valid as a React child

嘿，这个错误我可太熟悉啦！咱们来拆解一下问题出在哪～

错误原因 #

React没办法直接把整个对象当作子元素渲染，你肯定是在组件里不小心直接输出了某个对象（比如data.otherTitles里的单个item，甚至整个数组对象），而不是提取对象里的具体属性来展示。

看你提供的data结构，otherTitles是一个包含两个对象的数组，每个对象都有titleHeading和titles属性。如果你的代码里写了类似{data.otherTitles[0]}或者遍历后直接输出{item}，就会触发这个错误——React完全不知道该怎么渲染一个带titleHeading和titles键的对象呀！

正确的渲染方式 #

你需要遍历数组，并且提取每个对象里的具体属性来渲染。这里给你补全并修正你的组件代码：

import * as React from 'react';

const data = {
  otherTitles: [
    { titleHeading:"X", titles:["A","B","C","D"] },
    { titleHeading:"Y Z", titles:["E","F","G","H"] }
  ]
};

export class OtherTitles extends React.Component {
  render() {
    return (
      <div className="other-titles-container">
        {/* 遍历otherTitles数组，把每个对象转换成可渲染的JSX */}
        {data.otherTitles.map((titleGroup, groupIndex) => (
          <div key={groupIndex} className="title-group">
            {/* 渲染分组标题 */}
            <h2>{titleGroup.titleHeading}</h2>
            {/* 遍历每个分组里的titles数组，渲染单个标题 */}
            <ul className="title-list">
              {titleGroup.titles.map((singleTitle, titleIndex) => (
                <li key={titleIndex}>{singleTitle}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    );
  }
}

关键注意点 #

• 必须遍历数组：用map方法把数组里的每个元素转换成React能识别的元素（比如<div>、<li>等）
• 提取具体属性：不要直接渲染titleGroup（整个对象），要渲染titleGroup.titleHeading、singleTitle这种具体的值
• 添加唯一key：每个遍历生成的元素都要加key属性（建议用业务唯一ID，这里用索引是简化写法），帮助React高效更新DOM

以后遇到类似错误，先检查是不是不小心把对象直接丢进JSX里了，只要把对象拆成具体的属性值渲染就好啦！

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