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>

这是 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: Cannot read 属性 'name' of undefined.

Answer 1

因为JSON在constructor的范围内，在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

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

ReactJS rendering data that is passed from a laravel controller as json string

javascript

controller

laravel

reactjs

laravel-7