React中state存储HTML字符串数组渲染出现逗号，如何循环渲染？

出现多余逗号是因为你直接把HTML字符串数组传入ReactHtmlParser，React渲染数组内容时默认会在元素之间添加逗号分隔符。以下是你需要的循环实现方案：

方案1：保留现有HTML字符串存储逻辑，循环遍历解析 #

渲染部分修改为遍历数组每个元素单独解析即可：

<div className="row">     
  {abc.test?.map((htmlStr, index) => (
    <React.Fragment key={index}>
      {ReactHtmlParser(htmlStr)}
    </React.Fragment>
  ))}
</div>

说明：使用数组map方法循环遍历每一个HTML字符串，单个调用ReactHtmlParser解析，key属性满足React列表渲染规范，React.Fragment避免生成多余的外层DOM节点，不会再出现多余逗号。另外注意React中指定DOM类名需要使用className属性，原代码中的class="row"需要修正避免语法告警。

方案2（更符合React开发规范的优化写法） #

你可以直接在生成final_array时存储React元素，省去HTML解析的性能开销：

const getFullData= (prop: string, filter_data?: any) => {
  let final_array: any = []
  // 原生成HTML字符串的逻辑改为直接生成React元素
  // 示例：原生成"<a href=\"#\"> text1</a>"的代码替换为下面的写法
  final_array.push(<a href="#">text1</a>)
  final_array.push(<a href="#">text2</a>)
  setfilterConst({...abc,test:final_array}) 
}

// 渲染时直接循环遍历即可，无需额外解析
<div className="row">     
  {abc.test?.map((item, index) => (
    <React.Fragment key={index}>
      {item}
    </React.Fragment>
  ))}
</div>

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