javascript - 从laravel Controller 作为json字符串传递的ReactJS渲染数据

我是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>

这是Example.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！但是在组件中，我具有followinf错误的此问题：Uncaught TypeError：无法读取未定义的属性“名称”。

最佳答案

这是因为JSON在constructor的范围内，并且在它的外部不可见。
您可能希望以组件状态存储数据，并以渲染状态存储用户。

然后可以使用.map来迭代render()中的JSON数据。

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}]

    this.state = {
      json:JSON.parse(props.data)
    };
  }

  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>
              {this.state.json.map(i => (
                <div>{i.name}</div>
              ))}
              <div className="card-body">I'm an example component!</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

这是ReactJS's explanation on state