Laravel/React - 从控制器获取数据数组以响应组件

Question

我的案例：

我正在将 Laravel （laravel/ui 脚手架）和 React App 结合起来。 这是我第一次尝试这个，发现自己陷入了从 BE 到 FE 获取数据的困境。

我看起来正在获取数据，但是当从该元素的数据集中记录时，我的 $testData 数组被转换为字符串。我不确定我应该做什么才能拥有我的数组恢复为 json 格式。

代码：

发送数据的控制器：

    public function index()
    {
        $testData = [
            ["name" => "Lucy"],
            ["name" => "Kurt"],
            ["name" => "Emma"],
        ];

        return view('intern.index')->with('testData', $testData);
    }

我有我的刀片，正在加载具有特定id的div：

@extends('layouts.app')
@section('body')
    <div id="react-app" data-list={{ json_encode($testData) }} ></div>
@endsection

以及在刀片视图上呈现的我的反应组件app.js :

function App( props ) {

    console.log(props.list)

    return (
        <div className="container">
            Hello World!
        </div>
    );
}

export default App;

if (document.getElementById('react-app')) {
    const thisElement = document.getElementById('react-app');
    let props = Object.assign({}, thisElement.dataset);
    console.log(props)
    /* The restult I am getting from that log:
    {
      list: "{{\"name\":\"Lucy\"},{\"name\":\"Kurt\"},{\"name\":\"Emma\"}}"
    }
    */
    ReactDOM.render(<App list={props.list} />, thisElement);
}

Answer 1

更新：

解决方案是简单地解析结果。

if (document.getElementById('react-app')) {
    const thisElement = document.getElementById('react-app');
    let props = Object.assign({}, thisElement.dataset);
    console.log(props)
    /* The restult I am getting from that log:
    {
      list: "{{\"name\":\"Lucy\"},{\"name\":\"Kurt\"},{\"name\":\"Emma\"}}"
    }
    */
    ReactDOM.render(<App list={JSON.parse(props.list)} />, thisElement);
}