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

Question

我对 React 完全陌生。

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

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

public function index()
{
    $data =  DB::table('posts')->get();
    return view('welcome')->withData(json_encode($data));
}

并且它运行完美。

在我的主视图中，我像这样调用 React。

        <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 !但在组件中，我遇到了以下错误:未捕获的类型错误:无法读取未定义的属性“名称”。

Answer 1

这是因为 JSON 位于构造函数的范围内，在其外部不可见。您可能希望将数据存储在组件状态中，并在渲染中存储用户数据。

您可以使用.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