Laravel Blade输出Unicode JSON导致React JSON.parse报错如何解决？

问题产生原因 #

1. 重复JSON编码：你在控制器中已经通过json_encode()将$surveyData转换为JSON字符串，传到视图后又调用了Blade的@json指令对已生成的JSON字符串做了第二次编码，导致JSON被嵌套转义，出现大量多余的反斜杠和Unicode转义符，结构完全不符合JSON.parse的解析要求。
2. 自定义属性未包裹引号：Blade输出@json内容时如果没有用双引号包裹属性值，HTML解析时会自动转义特殊字符，进一步破坏JSON结构。

解决方法 #

最优方案：移除重复编码逻辑 #

控制器直接传递原始数据，不需要提前做JSON编码，交给Blade的@json指令统一处理：

// 控制器修改后代码
$surveyData = Empresa::find($empresa_id)->survey;    
return view('surveys.edit')->with('surveyData', $surveyData);

Blade模板中给自定义属性加双引号包裹：

<div id="poll" data-survey="@json($surveyData)"></div>

React端直接正常解析即可：

const oldData = document.querySelector("#poll").dataset.survey
const surveyData = JSON.parse(oldData)

备选方案：保留控制器编码，Blade直接输出 #

如果不需要修改控制器的编码逻辑，Blade模板中去掉@json指令，直接输出控制器传过来的已编码字符串即可：

<div id="poll" data-survey="{{ $surveyData }}"></div>

应急临时方案（不推荐生产环境使用） #

如果暂时无法修改后端代码，可以在前端做两次解析兼容处理：

const oldData = document.querySelector("#poll").dataset.survey
// 先解析一次去掉外层嵌套转义，再解析得到原始数据
const surveyData = JSON.parse(JSON.parse(oldData))

该方案仅适合临时调试使用，生产环境建议优先修复后端重复编码的问题，避免不必要的性能损耗和潜在的解析异常。

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