React获取MySQL数据时如何正确解析嵌套JSON字符串

直接调用JSON.parse()失效的核心原因是response[0].data对应的字符串不符合标准JSON格式：标准JSON要求对象的所有键必须用双引号包裹，你当前拿到的字符串里name键没有加双引号，属于JS对象字面量格式，不是合法JSON，所以直接解析会抛出语法错误，自然无法读取属性。

方案1：后端侧修正（优先推荐） #

• 后端往MySQL存储data字段时，直接使用语言内置的标准JSON序列化方法处理，比如Node.js环境调用JSON.stringify()，不要手动拼接对象字符串，保证存入数据库的是键带双引号的合法JSON字符串
• 后端返回接口数据时，也可以提前把data字段解析成对象再返回，前端无需做二次处理，大幅降低前端兼容成本

方案2：前端侧兼容处理（临时方案） #

如果暂时无法调整后端逻辑，可以用以下两种方式解析非标准的对象字符串：

方式A：用new Function构造函数解析 #

fetch(`http://localhost:3000/getQuiz${window.location.pathname}`, requestOptions)
  .then(response => response.json())
  .then(response => {
    // 解析非标准对象字符串
    const parseData = str => new Function(`return ${str}`)()
    const dataObj = parseData(response[0].data)
    // 可正常读取属性
    console.log(dataObj.name) // 输出 Marie
    console.log(dataObj.answers) // 输出 ["1", "3", "0"]
  })

方式B：正则补全键双引号后解析 #

通过正则把无引号的键替换为双引号包裹的格式，转换为标准JSON后再调用JSON.parse解析：

const dataStr = response[0].data
// 匹配无引号的键，替换为双引号包裹格式
const validJsonStr = dataStr.replace(/(\w+)\s*:/g, '"$1":')
const dataObj = JSON.parse(validJsonStr)
console.log(dataObj.name)

注意：前端使用new Function类方法解析字符串时，要确保数据来源完全可信，避免存在XSS注入风险。

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