React JS渲染接口返回changed字段显示[object Object]如何解决

问题原因 #

你目前的写法是直接将changed对象数组传入sanitizeHtml方法，JS在隐式转换对象为字符串时会输出[object Object]，所以出现了显示异常。

解决方法 #

你需要先遍历changed数组，提取每个元素的display_value属性值，拼接后再渲染即可，根据你的使用场景可以选择两种写法：

1. 若display_value为纯文本，无需解析HTML（更安全，推荐）：

<div className="inner-sub-row">
  <div className="suggested-change">
    <p className="suggested-title">{translate('suggestedChange')}:</p>
    <p>
      {field.get(index).changed?.map(item => item.display_value).join('、') || 'N/A'}
    </p>
  </div>
</div>

2. 若display_value包含需要解析的HTML内容：

<div className="inner-sub-row">
  <div className="suggested-change">
    <p className="suggested-title">{translate('suggestedChange')}:</p>
    <p 
      dangerouslySetInnerHTML={{ 
        __html: field.get(index).changed?.map(item => sanitizeHtml(item.display_value)).join('、') || 'N/A' 
      }} 
    />
  </div>
</div>

补充说明：上述代码中使用?.可选链操作符避免数组为空时报错，如果你的项目不支持可选链语法，可以替换为(field.get(index).changed || [])做兼容。

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