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! НО в компоненте у меня есть эта проблема со следующей ошибкой: Uncaught TypeError: Невозможно прочитать имя свойства undefined.

Answer 1

Это потому, что JSON находится в пределах constructor и не виден вне его. Вы хотели бы сохранить данные в состоянии компонента и пользователя, который находится в рендере.

Вы можете использовать затем .map для итерации JSON данных в render().

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 состояния