数组字符串转HTML元素失败？API数据渲染异常求助

问题根源 #

你在list数组中存储的是字符串格式的HTML标签，React会将这类字符串直接作为文本内容输出，不会解析为可渲染的JSX元素，这就是list内容无法正常渲染的原因。

修复代码 #

方案一：修改原有for循环逻辑 #

把字符串拼接改为直接创建JSX元素：

let list = JSON.parse(JSON.stringify(responses))
for (let i = 0; i < list.length; i++) {
  for (let j = 0; j < list[i].length; j++) {
    // 生成JSX的<li>元素而非字符串，同时添加key属性（React列表渲染要求）
    list[i][j] = <li key={j}>{list[i][j]}</li>
  }
}

方案二：用map替代for循环（更符合React开发习惯） #

直接通过map方法生成JSX数组，替代原有的for循环处理：

// 替换原来的list处理代码
const list = responses.map((group, groupIdx) => 
  group.map((item, itemIdx) => (
    <li key={`${groupIdx}-${itemIdx}`}>{item}</li>
  ))
)

为什么temp数组能正常渲染？ #

因为temp数组中直接存放的是React可识别的JSX元素（<li className="ssl">...</li>），React可以直接解析并渲染这些元素，而list之前存的是字符串，自然无法被正确解析。

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