Laravel/React-从控制器获取一组数据以对组件进行反应

Question

我的案例：

我正在组合Laravel(Laravel/ui脚手架(和React应用程序。这是我第一次尝试，发现自己被困在从BE到FE的数据中。

I看起来我正在获取数据，但我的$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

我的react组件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);
}