React Quill渲染数据时出现多余双引号问题求助

问题根源 #

数据被额外双引号包裹，通常是两种情况导致：

• 保存环节错误地对HTML字符串做了重复转义（比如两次调用JSON.stringify），让引号被存入了数据库
• 渲染时直接输出带引号的字符串，同时没解析HTML内容

具体解决步骤 #

1. 从存储源头修复（优先推荐） #

检查前端保存数据的代码，确保你存储的是React Quill返回的原始HTML字符串，不要额外包裹引号或重复转义。
比如之前如果是错误写法：

// 错误：重复转义导致引号被存入数据库
fetch('/api/save-data', {
  method: 'POST',
  body: JSON.stringify({ pickup: JSON.stringify(pickup) })
})

改成正确写法：

// 正确：直接存储原始HTML字符串
fetch('/api/save-data', {
  method: 'POST',
  body: JSON.stringify({ pickup })
})

2. 渲染时临时修复（如果数据已带引号存库） #

如果数据库里的数据已经带引号，渲染前先去掉首尾的引号，同时用dangerouslySetInnerHTML解析HTML（直接输出会把<p>这类标签当成纯文本显示）：

<div className='col-12' dangerouslySetInnerHTML={{ __html: values.pickup.replace(/^"|"$/g, '') }} />

注意：如果内容来自用户输入，要做XSS防护避免注入风险；如果是后台可控的内容，直接使用即可。

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