REACT JS:映射在JSX中呈现的对象数组

我是React JS的新手。问题是我需要在这段代码中显示数据库中的所有字段。 我已经能够在浏览器控制台中获取所有数据作为对象,并且我能够在浏览器中查看数组中的最后一块数据,但是无法查看它们。 请原谅我代码中的错误格式,因为我是新手。谢谢提前…..

输出和代码

浏览器视图: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代码获得的,该插件采用JS代码中给出的urlforms

HTTP://localhost/Akshay/REACT/testDataAPI.php用户= 2&NUM = 10&格式= JSON

我的代码:

     React Tutorial          
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 (
  • {this.state.companyID} is the name {this.state.username} is the ID
  • ); } }); ReactDOM.render( , document.getElementById('content') );

    使用map来呈现数据。 并将json存储为状态本身的javascript对象,而不是两个单独的数组。

             

    的jsfiddle

    对于小提琴示例,我删除了componentDidMount $.get()代码。

    PS将状态数组数据创建为对象数组,如小提琴示例所示

    我认为它会对你有所帮助。

         React Tutorial