ReactJS渲染[object Object]而非数组name值的问题排查

需求 #

根据布尔值过滤对象数组，仅返回包含active: true的对象组成的新数组，最终渲染这些对象的name值。

基础代码 #

原始数组：

const extrasList = [
    {key: 0, name: "extraNew1", price: 20, active: true },
    {key: 1, name: "extraNew2", price: 100, active: false },
    {key: 2, name: "extraNew3", price: 400, active: false },
]

过滤active: true的对象：

const activeExtras = extrasList.filter((extra) => {
    return extra.active;
});

生成React元素数组：

const aExtrasList = activeExtras.map((extra) => {
    return (
      <div key={extra.key}>
        <p>{extra.name} </p>
      </div>
    );
})

问题现象 #

单独渲染aExtrasList时能正常显示extraNew1，但将其放入模板字符串变量后，得到的结果是[object Object]：

const toSend = [`name: ${name} - model: ${activeModel} - extra: - ${aExtrasList}`];

原因分析 #

aExtrasList是React元素组成的数组，当在模板字符串中进行拼接时，JavaScript会自动调用数组的toString()方法，数组中的每个React元素本质是对象，转换后就会变成[object Object]，最终整个数组会显示为[object Object]。

解决方案 #

根据使用场景选择对应方案：

场景1：在React中渲染内容

不要将React元素和字符串拼接，直接在JSX中组合内容：

<div>
  name: {name} - model: {activeModel} - extra: - {aExtrasList}
</div>

场景2：生成纯字符串（如用于发送数据）

先提取活跃额外项的name组成字符串数组，再拼接成目标格式：

// 提取所有活跃项的name
const activeExtraNames = activeExtras.map(extra => extra.name);
// 用分隔符（如逗号）拼接成字符串
const extrasStr = activeExtraNames.join(', ');
// 生成最终字符串
const toSend = `name: ${name} - model: ${activeModel} - extra: - ${extrasStr}`;

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