REACT JS：映射对象数组以在JSX中呈现
我是React
JS的新手，问题是我需要在这段代码中显示数据库中的所有字段。我已经能够在浏览器控制台中将所有数据作为对象获取，并且能够在浏览器中查看数组中的最后一条数据，但无法查看它们。请原谅我代码中的格式错误，这是我的新知识。在此先感谢.....
输出和代码
浏览器视图：Lands of Toys Inc.是名称131是ID
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代码中给出的url形式
http：//localhost/Akshay/REACT/testDataAPI.php？user = 2＆num = 10＆format =
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()代码componentDidMount。
PS如小提琴示例所示，将状态数组数据创建为对象数组
-
问题内容： 我试图通过对象属性（此示例的名称）并在函数的轻松循环中列出它们。我发现这样做有些尴尬，但这似乎不正确。 这是我得到的： 有一个更好的方法吗？我只需要一个循环即可遍历对象数组，列出所需的属性并创建许多html节点之一。 问题答案： 您可以简单地在数组上 映射
-
我正在尝试将我的对象[]数组映射并过滤到int[]数组。如果对象是int，效果很好，但如果不是int，则抛出强制转换异常。我想知道我是否可以在lambda表达式中附加一个try/catch？这是我的代码： 或者更好的方法是试着抓住整个街区？
-
我有一个对象数组： 寻找一个简单的一行返回： 因此，我可以很容易地泵到一个反应下拉与适当的键。 我觉得这个简单的解决方案应该可以工作，但是我得到了无效的语法错误：
-
我试图通过嵌套的数组使用JSX映射代码。 这是： 以及迄今为止我提出的代码： 这就是我得到的错误： 我做错了什么？
-
问题内容： 因此，我已经进行了一段时间的尝试，并认为最好重构我的代码，以便将状态设置为对象数组。我想做的是单击按钮时增加一个数字。 我在组件中有一个回调函数，可触发一个函数来更新状态…但是，我很难将对象内的键值作为目标。 我的初始状态如下： 我正在尝试锁定键，但不知道如何操作。我的函数传递了一个键，以便可以将数组中的索引作为目标，但是当我尝试执行以下操作时：由于意外的令牌，它会引发错误。 我曾尝试
-
所以我在这方面做了一段时间，觉得最好重构我的代码，以便将状态设置为一个对象数组。我要做的是增加一个点击按钮的数字。 我在这里尝试过类似于这个线程的东西，但是我不断得到错误。 我可以编写什么样的函数来设置我想要目标的对象中的键的状态？