解决Laravel Blade中使用React时JSON解析错误的教程-php教程-PHP中文网

解决Laravel Blade中使用React时JSON解析错误的教程

心靈之曲

发布： 2025-08-19 21:08:01

原创

257人浏览过

解决laravel blade中使用react时json解析错误的教程

本教程旨在解决在Laravel Blade模板中向React组件传递JSON数据时遇到的JSON.parse错误。该错误通常是由于JSON数据被多次编码，导致React无法正确解析。我们将探讨如何避免双重编码，并提供正确的JSON数据传递方法，确保React组件能够顺利使用数据。

问题分析：双重编码

在Laravel Blade模板中使用React时，常见的问题是JSON数据被多次编码。具体来说，在Controller中使用了json_encode()，然后在Blade模板中又使用了@json()指令。@json()指令本身就会将数据编码为JSON格式，因此，如果数据已经被json_encode()处理过，就会导致双重编码，产生类似u0022{\u0022...\u0022}u0022这样的Unicode转义字符串，React无法直接解析。

解决方案：避免双重编码

要解决这个问题，最简单的方法就是避免双重编码。

1. 修改Controller：

在Laravel Controller中，直接将原始数据传递给Blade视图，无需使用json_encode()。

// 错误的做法：
// return view('surveys.edit')->with('surveyData', json_encode($surveyData));

// 正确的做法：
return view('surveys.edit')->with('surveyData', $surveyData);

登录后复制

2. 修改Blade模板：

在Blade模板中，使用@json()指令将数据编码为JSON格式，并将其作为HTML属性传递给React组件。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

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

登录后复制

React组件中的数据获取与解析

在React组件中，通过dataset属性获取JSON字符串，并使用JSON.parse()方法将其解析为JavaScript对象。

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

// 现在 parsedData 是一个 JavaScript 对象，可以安全地使用
console.log(parsedData);

登录后复制

完整示例

Laravel Controller (app/Http/Controllers/SurveyController.php):

<?php

namespace AppHttpControllers;

use AppModelsEmpresa;
use IlluminateHttpRequest;

class SurveyController extends Controller
{
    public function edit($empresa_id)
    {
        $surveyData = Empresa::find($empresa_id)->survey;
        return view('surveys.edit')->with('surveyData', $surveyData);
    }
}

登录后复制

Laravel Blade模板 (resources/views/surveys/edit.blade.php):

<!DOCTYPE html>
<html>
<head>
    <title>Edit Survey</title>
</head>
<body>
    <div id="poll" data-survey="@json($surveyData)"></div>

    <script>
        const oldData = document.querySelector("#poll").dataset.survey;
        const parsedData = JSON.parse(oldData);
        console.log(parsedData);
    </script>
</body>
</html>

登录后复制

注意事项：