ReactJS 渲染数据，从 laravel 控制器作为 json 字符串传递

Question

我对 React 完全陌生。

我想使用laravel从数据库中检索数据;

在我的控制器中，我接收数据并以json形式发送，如下所示

public function index()

{

    $data =  DB::table('posts')->get();

    return view('welcome')->withData(json_encode($data));

}

它完美地工作。

在我的家庭视图中，我像这样调用反应。

        <div id="example" data="{{ $data }}"></div>

        <script src="js/app.js" ></script>

这是例子.js：

    import React, { Component } from 'react';

    import ReactDOM from 'react-dom';

    export default class Example extends Component

    {

        constructor(props)

        {

            super(props);

            console.log(props.data);//[{"id":1,"name":"Laravel","created_at":null,"updated_at":null},{"id":2,"name":"Reacts Js","created_at":null,"updated_at":null}]

            const json = JSON.parse(props.data);

            var L = json.length;//2

            for(var i =0 ; i < L ; i++)

            {

                console.log(json[i].name);//i==0 : Laravel

                                        // i==1 : Reacts Js

            }

        }

        render()

        {

            return (

                <div className="container">

                    <div className="row justify-content-center">

                        <div className="col-md-8">

                            <div className="card">

                                <div className="card-header">Example Component</div>

                                for(var i =0 ; i < L ; i++)

                                {

                                    <div>{json[i].name}</div>

                                }

                                <div className="card-body">I'm an example component!</div>

                            </div>

                        </div>

                    </div>

                </div>        

            );

        }

    }

    if (document.getElementById('example')) {

        var data = document.getElementById(('example')).getAttribute('data');

        ReactDOM.render(<Example data={data}/>, document.getElementById('example'));

    }

在浏览器控制台中，我可以看到json[i].name完美！但是在组件中，我有这个问题，有以下错误：未捕获的类型错误：无法读取未定义的属性“名称”。

Answer 1

是因为 JSON 在 它的范围内，在它之外不可见。您可能希望将数据存储在组件状态中，并将用户存储在呈现中。constructor您可以使用 then .map 来迭代 中的 JSON 数据。render()class Example extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; console.log(props.data);//[{"id":1,"name":"Laravel","created_at":null,"updated_at":null},{"id":2,"name":"Reacts Js","created_at":null,"updated_at":null}]&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; json:JSON.parse(props.data)&nbsp; &nbsp; };&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; &nbsp; <div className="row justify-content-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="col-md-8">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="card-header">Example Component</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.json.map(i => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{i.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="card-body">I'm an example component!</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}