React测验应用API数据显示乱码问题：如何正确显示API数据？

你遇到的问题根源是opentdb API返回的题目文本使用了HTML实体编码（比如"、&这类格式），直接渲染会把编码字符原样显示，所以才出现奇怪符号。你当前用的JSON.parse(JSON.stringify())只是做了深拷贝，完全没处理编码问题。

下面给两种可行的解决方法：

方法一：使用dangerouslySetInnerHTML #

这是React官方提供的直接渲染HTML内容的方式，因为opentdb的公开题库内容是可靠的，不用担心XSS风险，可以放心使用：

<p dangerouslySetInnerHTML={{ __html: props.question }}></p>

方法二：手动解码HTML实体 #

如果不想用dangerouslySetInnerHTML，可以写一个解码函数处理文本：

function decodeHtmlEntities(text) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(`<div>${text}</div>`, 'text/html');
  return doc.firstChild.textContent;
}

渲染时调用这个函数即可：

<p>{decodeHtmlEntities(props.question)}</p>

两种方法都能把"这类编码转换成正常的引号、符号，让题目显示恢复正常。

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