如何在Material-UI React中按人数动态渲染PersonIcon并解决[object Object]报错

你遇到的输出异常是因为 <PersonIcon /> 属于框架生成的虚拟DOM对象，使用+=字符串拼接运算符操作对象时，会自动触发对象的toString()方法，最终就会得到[object Object]的拼接结果。

方案1：数组存储JSX元素（和你原有for循环逻辑最接近） #

框架支持直接渲染JSX元素组成的数组，你只需要把拼接逻辑改成往数组里push元素即可：

// 初始化空数组存储图标元素
const participants = [];
for (let i = 0; i < activity.participants; i++) {
  // 每个列表元素需要添加唯一key，这里暂时用索引占位
  participants.push(<PersonIcon key={i} />);
}
// 后续在JSX模板中直接使用 {participants} 即可渲染对应数量的图标

方案2：更简洁的一行实现（推荐） #

用Array.from可以直接生成对应长度的图标数组，代码更简洁：

const participants = Array.from({ length: activity.participants }, (_, index) => <PersonIcon key={index} />)

如果你的参与人数据带有唯一标识（比如用户ID），建议把key属性的值替换为对应唯一标识，不要直接用循环索引，避免列表顺序变化时出现渲染异常。

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