Javascript 在 JSX Render for React.js 中遍历 JSON 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29018963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iterating through a JSON response in JSX Render for React.js
提问by johncho
I'm trying to create a table from a JSON response formulated from a submitted form, therefore the initial render needs to be blank, but this blank state is proving to be an issue.
我正在尝试根据提交的表单制定的 JSON 响应创建一个表，因此初始渲染需要为空白，但事实证明此空白状态是一个问题。
The issue is complicated further by the fact that the response could have different headers, number of columns, and order.
由于响应可能具有不同的标题、列数和顺序，这个问题变得更加复杂。
Parent component
父组件
This gets the resultData and passes it to a child component
这将获取 resultData 并将其传递给子组件
<ReportsTable title={this.props.title} resultData={this.state.resultData} />
Child component
子组件
var ReportsTable = React.createClass({
render: function() {
var resultData = this.props.resultData;
return(
<div>
<h3>{this.props.title}</h3>
<table>
<tr>
//iteration here
</tr>
</table>
</div>
)
}
});
Any attempt at iteration gives me a
任何迭代尝试都会给我一个
Uncaught TypeError: Cannot read property XXX of undefined
未捕获的类型错误：无法读取未定义的属性 XXX
The Data received is in this type of format
接收到的数据是这种类型的格式
[Array[1], Array[1]]
0: Array[1]
0: Object
family_name: "Sales"
gross_margin: "0%"
net_profit: "{resultData.map(function(tableRow, i) {
return (
<TableRow tableRow={tableRow} key={i} />
);
})}
.00"
profit_percent: "0%"
quantity_on_hand: 2863
retail: ",347.12"
total_cost: ",615.96"
total_sold: 49
1: Array[1]
0: Object
family_name: "Service"
gross_margin: "0%"
net_profit: "var TableRow = React.createClass({
render: function(){
var tableRow = this.props.tableRow;
console.log(tableRow);
return(
<tr key={tableRow}>
{tableRow.map(function(tableItem, i){
<td key={i}>{tableItem}</td>
})}
</tr>
);
}
});
.00"
profit_percent: "0%"
quantity_on_hand: 147.5
retail: "9.05"
total_cost: "8.40"
total_sold: 10.8
[UPDATE]
[更新]
So we modified the response from the server so that I get one less nest in the Array. But now when I try resultData.map(function(item) { }) and I get an "Uncaught TypeError: undefined is not a function" error as I'm trying to map through the properties of the Object. When I try to map through an Array it works so I don't think it's my syntax.
所以我们修改了来自服务器的响应，以便在 Array 中少一个嵌套。但是现在，当我尝试 resultData.map(function(item) { }) 时，当我尝试映射对象的属性时，出现“Uncaught TypeError: undefined is not a function”错误。当我尝试通过 Array 进行映射时，它可以工作，所以我认为这不是我的语法。
In the end, my trouble is iterating through the properties of each Object.
最后，我的麻烦是遍历每个对象的属性。
This part from the parent works
这部分来自父作品
<table className="table table-condensed table-striped">
<thead>
<tr>
{resultTitles.map(function(title){
var textAlignLeft = false;
if(textLeftMatch.test(title)){
textAlignLeft = true;
}
title = title.replace(/_/g, " ");
return <th key={title} className={textAlignLeft ? 'text-left' : ''}>{title}</th>
})}
</tr>
</thead>
<tbody>
{resultData.map(function(tableRow, i) {
return (
<TableRow tableRow={tableRow} key={i} />
);
})}
</tbody>
</table>
var TableRow = React.createClass({
render: function(){
var tableRow = this.props.tableRow;
var rowArray = $.map(tableRow, function(value, index){
return [value];
});
return(
<tr key={tableRow}>
{rowArray.map(function(tableItem, i){
return <td key={i} className={(i === 0) ? 'text-left' : ''}>{tableItem}</td>
})}
</tr>
);
}
});
This part in the Child Component does not
子组件中的这部分没有
Data:
{
"status": {
"build": {
"a":"b",
"c":"d"
}
}
}
`render: function(){
var buildInfo = this.props.applicationInfo.status.build;
var properties = Object.keys(buildInfo).map((k, idx) => {
return (
<p key={idx}><strong>{k}</strong> - {buildInfo[k]}</p>
);
});
return(
<div>
{properties}
</div>
);
}`
采纳答案by johncho
So this works
所以这有效
<select className="form-control" >
{Object.keys(item.unit).map(unit => {
return <option value="1">1</option>
})}
</select>
However, after searching for awhile, I found a better starting point found here http://dynamictyped.github.io/Griddle/quickstart.html
然而，搜索了一段时间后，我找到了一个更好的起点http://dynamictyped.github.io/Griddle/quickstart.html
回答by linkebon
I have had the same problem.
我曾经也有过一样的问题。
The reason why i got "Uncaught TypeError: undefined is not a function" was because i tried to iterate over the properties of a json object using map which is not possible. The solution for me was to iterate over the keys of the json object using Object.keys(). See below for my solution.
我得到“Uncaught TypeError: undefined is not a function”的原因是因为我试图使用 map 迭代 json 对象的属性，这是不可能的。我的解决方案是使用 Object.keys() 迭代 json 对象的键。请参阅下面的我的解决方案。
##代码##回答by SanJayKhuRanA
If you have JSON instead of Arrayand you want to loop in JSX react render function use Object.keys:
如果您有 JSON 而不是Array并且您想在 JSX react 中循环渲染函数，请使用Object.keys：
