React子元素无效错误：API数据渲染失败求助

错误根源 #

这个报错核心是你试图直接把整个JavaScript对象作为React子元素渲染，React只允许渲染字符串、数字、React元素这类基本可渲染类型，不能直接渲染带键的对象。

你的代码问题分析 #

1. 第一次更新用Object.entries(absence).map()完全没必要——Object.entries是用来遍历对象键值对的，而你明确说数据是对象数组，直接用数组的map方法就行。Object.entries返回的是[键, 值]格式的数组，所以你的item.id其实是undefined，自然渲染不出内容。

2. 第二次更新的Object.entries(absence.absence).map(item => item.map(...))属于多此一举：如果absence.absence是对象数组，直接对它用map就好，用Object.entries会把数组转成[索引, 数组元素]的结构，再嵌套map就会把索引和对象分开处理，导致部分内容空或者报错。

修正后的代码 #

假设你的数据结构是这样（根据报错信息推断）：

// 示例数据结构
const absence = {
  absence: [
    {
      id: 1,
      startDate: "2024-05-01",
      days: 2,
      absenceType: "病假",
      employee: { name: "张三" },
      approved: true
    },
    {
      id: 2,
      startDate: "2024-06-10",
      days: 1,
      absenceType: "事假",
      employee: { name: "李四" },
      approved: false
    }
  ]
};

直接对数组用map，拆解对象属性渲染，同时处理员工姓名和审批状态：

{absence.absence.map((i) => (
  <div key={i.id} style={{ margin: '1rem 0', padding: '1rem', border: '1px solid #eee' }}>
    <p>ID: {i.id}</p>
    <p>开始日期: {i.startDate}</p>
    <p>天数: {i.days}</p>
    <p>请假类型: {i.absenceType}</p>
    {/* 用可选链处理employee可能为undefined的情况，避免报错 */}
    <p>员工姓名: {i.employee?.name}</p>
    {/* 把布尔值转成可读文字 */}
    <p>审批状态: {i.approved ? '已批准' : '未批准'}</p>
  </div>
))}

关键注意点 #

• 数组遍历必须给每个元素加唯一的key，这里用i.id是最合适的。
• 遇到嵌套对象（比如employee），要明确访问到具体的属性（如name），不能直接写{i.employee}，否则又会触发同样的对象渲染错误。
• 用可选链?.处理可能为空的嵌套属性，避免API返回数据缺失时页面崩溃。

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