API返回HTML特殊实体如何正确显示？React场景问题排查与修复

你的数据获取和存储方式没毛病，问题出在这个Trivia API返回的内容本身就把特殊字符转成了HTML实体（比如"对应引号、ö对应德语的ö），直接渲染这些字符串就会显示原始实体，而非正常字符。

方案1：用React的dangerouslySetInnerHTML快速渲染 #

这是最省事的办法，让React直接解析HTML内容：

渲染问题时：

<div dangerouslySetInnerHTML={{ __html: question }} />

渲染正确/错误答案时同理：

<div dangerouslySetInnerHTML={{ __html: correct_answer }} />

⚠️ 注意：这个方法只适合信任的数据源（比如你用的这个公开API），如果是用户提交的内容，要提防XSS攻击。

方案2：提前解码实体再存储 #

如果不想用dangerouslySetInnerHTML，可以写个小工具函数解码实体，在处理API返回数据的时候就把字符串转成正常格式：

先定义解码函数：

function decodeHtml(str) {
  const tempElement = document.createElement('textarea');
  tempElement.innerHTML = str;
  return tempElement.value;
}

然后修改你的useEffect逻辑：

React.useEffect(() => {
  fetch("https://opentdb.com/api.php?amount=5&category=9&difficulty=medium")
    .then(res => res.json())
    .then(info => setData(info.results.map(item => {
      return { 
        type: item.type, 
        question: decodeHtml(item.question), 
        correct_answer: decodeHtml(item.correct_answer), 
        incorrect_answers: item.incorrect_answers.map(ans => decodeHtml(ans)),
        id: nanoid() 
      }})))
}, [])

处理完后，直接渲染字符串就行：

<div>{question}</div>

方案1适合快速搞定需求，方案2把解码逻辑前置，后续渲染更常规。根据你的习惯选就行，效果都一样。

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