如何修改映射后的对象数组属性？前端开发技术求助

我只能通过对象数组访问前端页面，必须通过修改这个数组来为属性添加CSS样式和HTML标签，尝试了下面的写法但未达预期：

{children.map((p => {return (
    {
        ...p,
        {...p.props,
        {...p.props.booking,
            ticket_id: <p style={{fontWeight: 600}}>{ticket_id}</p>
        }}
    })}
))} 

问题分析 #

你的对象展开逻辑存在层级错误：...p.props 和 ...p.props.booking 的写法没有正确覆盖原对象的嵌套属性，直接展开会把props和booking的属性平级放到外层对象，无法正确更新p.props.booking.ticket_id。

修正方案 #

采用逐层嵌套覆盖的方式更新属性：

{children.map(p => {
  return {
    ...p,
    props: {
      ...p.props,
      booking: {
        ...p.props.booking,
        ticket_id: <p style={{ fontWeight: 600 }}>{p.props.booking.ticket_id}</p>
      }
    }
  };
})}

额外说明 #

• 修正ticket_id取值：原代码直接使用未定义的ticket_id变量，改为从当前遍历的对象p.props.booking中取值，避免变量未定义报错。
• 确认渲染兼容性：需要确保后续页面渲染逻辑支持接收并渲染JSX类型的ticket_id属性，如果原本仅支持字符串渲染，需同步调整渲染逻辑。

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