REACT JS: отображение массива объектов для рендеринга в JSX

Я новичок в React JS. Вопрос в том, что мне нужно отображать все поля из моей базы данных в этом фрагменте кода. Я смог получить все данные как объекты в консоли браузера, и я могу просматривать последние данные в массиве в браузере, но не смог их просмотреть. Пожалуйста, простите меня за неправильный формат в коде, поскольку я новичок в этом. Спасибо заранее …..

Выход и коды

Отображение на стороне сервера визуализированного компонента responseJS в приложении PHP

Просмотр обозревателя: Land of Toys Inc. – это имя 131 – это идентификатор

Данные JSON:

{"posts":[ {"id":"103","name":"Atelier graphique"}, {"id":"112","name":"Signal Gift Stores"}, {"id":"114","name":"Australian Collectors, Co."}, {"id":"119","name":"La Rochelle Gifts"}, {"id":"121","name":"Baane Mini Imports"}, {"id":"124","name":"Mini Gifts Distributors Ltd."}, {"id":"125","name":"Havel & Zbyszek Co"}, {"id":"128","name":"Blauer See Auto, Co."}, {"id":"129","name":"Mini Wheels Co."}, {"id":"131","name":"Land of Toys Inc."} ]}

Эти данные получены с помощью кода PHP, написанного как плагин, который находится в форме URL-адреса, который указан в коде JS

HTTP: //localhost/Akshay/REACT/testDataAPI.php пользователь = 2 & Num = 10 & = формат JSON

Мой код:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React Tutorial</title> <!-- Not present in the tutorial. Just for basic styling. --> <link rel="stylesheet" href="css/base.css" /> <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script> <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script> <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel"> var UserGist = React.createClass({ getInitialState: function() { return { username:[], companyID:[] }; }, componentDidMount: function() { var rows = []; this.serverRequest = $.get(this.props.source, function (result) { for (var i=0; i < 10; i++) { var lastGist = result.posts[i]; //console.log(result.posts[i]); this.setState({ username: lastGist.id, companyID: lastGist.name }); } }.bind(this)); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <li>{this.state.companyID} is the name {this.state.username} is the ID</li> ); } }); ReactDOM.render( <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />, document.getElementById('content') ); </script> </body> </html>

Используйте карту для отображения ваших данных. и хранить json как объект javascript в самом состоянии, а не в двух отдельных массивах.

  <!-- Not present in the tutorial. Just for basic styling. --> <link rel="stylesheet" href="css/base.css" /> <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script> <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script> <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script> <div id="content"></div> <script type="text/babel"> var UserGist = React.createClass({ getInitialState: function() { return { data: [{"id":"103","name":"Atelier graphique"}, {"id":"112","name":"Signal Gift Stores"}, {"id":"114","name":"Australian Collectors, Co."}, {"id":"119","name":"La Rochelle Gifts"}, {"id":"121","name":"Baane Mini Imports"}, {"id":"124","name":"Mini Gifts Distributors Ltd."}, {"id":"125","name":"Havel & Zbyszek Co"}, {"id":"128","name":"Blauer See Auto, Co."}, {"id":"129","name":"Mini Wheels Co."}, {"id":"131","name":"Land of Toys Inc."}] }; }, componentDidMount: function() { }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div> {this.state.data.map(function(item, index){ return <li>{item.name} is the company name, {item.id} is the ID</li> })}</div> ); } }); ReactDOM.render( <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />, document.getElementById('content') ); </script> </html>

JSFIDDLE

Для примера $.get() я удалил ваш код $.get() в componentDidMount .

PS Создайте данные массива состояний как массив объектов, как показано в примере скрипта

Это поможет вам, я думаю.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React Tutorial</title> <!-- Not present in the tutorial. Just for basic styling. --> <link rel="stylesheet" href="css/base.css" /> <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script> <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script> <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel"> var UserGist = React.createClass({ getInitialState: function() { return { username:[], companyID:[] }; }, componentDidMount: function() { var rows = []; this.serverRequest = $.get(this.props.source, function (result) { var username = []; var companyID = []; for (var i=0; i < 10; i++) { var lastGist = result.posts[i]; //console.log(result.posts[i]); username.push(lastGist.id); companyID.push(lastGist.name); } this.setState({ username: username, companyID: companyID, }); }.bind(this)); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div> {this.state.companyID.map(function(item, index){ return <li>{item} is the company name, {this.state.username[index]} is the ID</li> })}</div> ); } }); ReactDOM.render( <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />, document.getElementById('content') ); </script> </body> </html>