我的情況：
我正在結合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);
}
uj5u.com熱心網友回復：
更新：
解決方案是簡單地決議結果。
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);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/438955.html
上一篇：如何顯示表格標題但值顯示“？”
下一篇：提交表單后如何顯示表格