React渲染API返回数组报错：Objects are not valid as a React child

这个错误的根源很明确——你在renderLists方法里返回了一个普通对象，而React组件的渲染方法只能返回React元素、元素数组或者字符串/数字这类基本类型，没法直接渲染普通对象。

看你写的代码：

return ( { lists } ); 

这里的{ lists }是ES6的对象简写语法，等价于{ lists: lists }，这就是React报错里提到的那个带lists键的对象。

修正方法 #

直接返回lists数组就行，不需要额外的大括号包裹：

renderLists() { 
  const lists = this.props.data.map((item, index) => <Holder data={item} key={index} />); 
  console.log(this.props.data); 
  // 直接返回map生成的React元素数组
  return lists; 
}

额外优化建议 #

1. 替换key值：目前你用index作为key，虽然能解决当前问题，但如果数组元素有唯一标识（比如每个item的id），建议用item.id当key：

   <Holder data={item} key={item.id} />
   

   这样React能更高效地识别元素变化，避免不必要的组件重渲染。

2. 确保Holder组件正常工作：要确认Holder组件能正确处理传入的data属性，比如渲染data.label和遍历data.items展示内容，举个简单的Holder示例：

   const Holder = ({ data }) => (
     <div>
       <h3>{data.label}</h3>
       <ul>
         {data.items.map(task => (
           <li key={task.id}>{task.value}</li>
         ))}
       </ul>
     </div>
   );
   

3. 调用renderLists的正确方式：在组件的render方法里调用时，要放在JSX的大括号中，比如：

   render() {
     return (
       <div className="list-container">
         {this.renderLists()}
       </div>
     );
   }
   

这样修改后，API返回的数组就能正常被映射渲染啦~

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