JS/React如何从嵌套数组提取数据生成指定格式的对象数组

错误根因 #

你现有的转换代码语法本身没有错误，只需要补充空值兜底就可以正常得到目标格式的对象数组。收到「对象不能作为子元素渲染」的报错，是因为你后续把生成的对象数组直接放到了JSX的子元素位置，React仅支持渲染字符串、数字、JSX节点等类型，不支持直接渲染普通JS对象。

优化后的转换代码 #

补充空值兜底逻辑，避免result或summary为undefined时返回undefined导致后续调用报错：

const newArray = result?.summary?.map((inner: any) => ({
  from: new Date(inner.start),
  to: new Date(inner.end),
  label: {
    text: inner.id,
  }
})) ?? [];

渲染示例 #

如果需要把数组内容展示到页面上，需要遍历每个对象，取出对应字段渲染：

{newArray.map((item, index) => (
  <div key={index}>
    <p>记录ID：{item.label.text}</p>
    <p>开始时间：{item.from.toLocaleDateString()}</p>
    <p>结束时间：{item.to.toLocaleDateString()}</p>
  </div>
))}

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