我是Javascripting和React JS编码的新手。我有这个JSON对象 -
var json1 = {"facilities":{"facility":[{"facilityCode":"J0LN","facilityId":"1","facilityName":"J0LN","npid":"1295718450","pid":"123457","providerState":"Alabama"},{"facilityCode":"K0NS","facilityId":"2","facilityName":"K0NS","npid":"9696969669","pid":"111111","providerState":"Alaska"},{"facilityCode":"J0LN1","facilityId":"3","facilityName":"J0LN1","npid":"111111111","pid":"221133","providerState":"Alabama"},{"facilityCode":"0987654321","facilityId":"4","facilityName":"0987654321","npid":"0987654321","pid":"235675","providerState":"Alabama"},{"facilityCode":"7776667676","facilityId":"5","facilityName":"7776667676","npid":"7776667676","pid":"236576","providerState":"Alabama"},{"facilityCode":"979797977","facilityId":"6","facilityName":"979797977","npid":"979797977","pid":"325347","providerState":"Alabama"},{"facilityCode":"9898989898","facilityId":"7","facilityName":"9898989898","npid":"9898989898","pid":"989898","providerState":"Alabama"},{"facilityCode":"121212","facilityId":"8","facilityName":"121212","npid":"1212120022","pid":"121212","providerState":"Connecticut"},{"facilityCode":"141414","facilityId":"9","facilityName":"141414","npid":"1414140022","pid":"141414","providerState":"Delaware"},{"facilityCode":"887766","facilityId":"10","facilityName":"887766","npid":"8877660022","pid":"887766","providerState":"Delaware"},{"facilityCode":"212121","facilityId":"11","facilityName":"OP-212121-OP","npid":"2121210022","pid":"212121","providerState":"Maryland"},{"facilityCode":"717171","facilityId":"12","facilityName":"IP-Qrtly-717171","npid":"7171710022","pid":"717174","providerState":"Alabama"},{"facilityCode":"RMC","facilityId":"13","facilityName":"RMC","npid":"1","pid":"676767","providerState":"Alabama"},{"facilityCode":"WCC","facilityId":"14","facilityName":"WCC","npid":"2","pid":"454676","providerState":"Alabama"},{"facilityCode":"FC","facilityId":"15","facilityName":"FN","npid":"1992813240","pid":"123456","providerState":"Alabama"},{"facilityCode":"VCC","facilityId":"16","facilityName":"VCC","npid":"1213121312","pid":"122312","providerState":"Alabama"},{"facilityCode":"AAAAA","facilityId":"17","facilityName":"AAAAA","npid":"3","pid":"112233","providerState":"Alabama"},{"facilityCode":"AAAAB","facilityId":"18","facilityName":"AAAAB","npid":"4","pid":"334455","providerState":"Alabama"},{"facilityCode":"AAAAC","facilityId":"19","facilityName":"AAAAC","npid":"5","pid":"556677","providerState":"Alabama"},{"facilityCode":"AAAAD","facilityId":"20","facilityName":"AAAAD","npid":"6","pid":"778899","providerState":"Alabama"},{"facilityCode":"AAAAE","facilityId":"21","facilityName":"AAAAE","npid":"7","pid":"616161","providerState":"Alabama"},{"facilityCode":"AAAAF","facilityId":"22","facilityName":"AAAAF","npid":"8","pid":"626262","providerState":"Alabama"},{"facilityCode":"AAAAG","facilityId":"23","facilityName":"AAAAG","npid":"9","pid":"717171","providerState":"Alabama"},{"facilityCode":"AAAAH","facilityId":"24","facilityName":"AAAAH","npid":"10","pid":"727272","providerState":"Alabama"},{"facilityCode":"AAAAI","facilityId":"25","facilityName":"AAAAI","npid":"11","pid":"757575","providerState":"Alabama"},{"facilityCode":"AAAAJ","facilityId":"26","facilityName":"AAAAJ","npid":"12","pid":"767676","providerState":"Alabama"},{"facilityCode":"AAAAK","facilityId":"27","facilityName":"AAAAK","npid":"13","pid":"818181","providerState":"Alabama"},{"facilityCode":"AAAAL","facilityId":"28","facilityName":"AAAAL","npid":"14","pid":"828282","providerState":"Alabama"},{"facilityCode":"AAAAM","facilityId":"29","facilityName":"AAAAM","npid":"15","pid":"858585","providerState":"Alabama"},{"facilityCode":"AAAAN","facilityId":"30","facilityName":"AAAAN","npid":"16","pid":"868686","providerState":"Alabama"},{"facilityCode":"AAAAO","facilityId":"31","facilityName":"AAAAO","npid":"17","pid":"919191","providerState":"Alabama"},{"facilityCode":"AAAAP","facilityId":"32","facilityName":"AAAAP","npid":"18","pid":"929292","providerState":"Alabama"},{"facilityCode":"AAAAQ","facilityId":"33","facilityName":"AAAAQ","npid":"19","pid":"959595","providerState":"Alabama"},{"facilityCode":"AAAAR","facilityId":"34","facilityName":"AAAAR","npid":"20","pid":"969696","providerState":"Alabama"},{"facilityCode":"UNIQUE","facilityId":"35","facilityName":"UNIQUE","npid":"21","pid":"123456","providerState":"Alabama"}]}};
我在这里设置我的数据状态并绑定它（不知道为什么我这样做，但我看到每个人都在做他们的ajax调用的一部分）
var stateSet = function(data) {
this.setState({data: json1});
};
stateSet.bind(this); // attempt to mock an AJAX call here, by assuming we have already obtained the JSON object.
return(
<table>
<tbody>
<tr>
<th>Facility Code</th>
<th>Facility ID</th>
<th>Facility Name</th>
<th>NPID</th>
<th>PID</th>
<th>Provider State</th>
</tr>
{
this.state.data.map(function(facility, key) {
// I'm not sure if the control is entering this function, and I don't understand why
return (
<tr>
<td>{facility.facilityCode}</td>
<td>{facility.facilityId}</td>
<td>{facility.facilityName}</td>
<td>{facility.npid}</td>
<td>{facility.pid}</td>
<td>{facility.providerState}</td>
</tr>
);
})
}
</tbody>
</table>
);
正如我在代码中提到的，作为评论的一部分，我不认为控件正在进入this.state.data.map(function(facility, key) {功能，我不明白为什么。
答案 0 :(得分：2)
您的数组路径不正确，还会检查this.state.data的可用性，以便在data不可用时不会失败，
{this.state.data && this.state.data.facilities.facility.map(function(facility, key) {}}
答案 1 :(得分：2)
您未正确定位facility数组。
应该是this.state.data.facilities.facility.map，您也可以直接在json1中将state设置为constructor
constructor() {
super();
var json1 = {
facilities: {
facility: [
{
facilityCode: "J0LN",
facilityId: "1",
facilityName: "J0LN",
npid: "1295718450",
pid: "123457",
providerState: "Alabama"
} ....
]
}
};
this.state = {
data: json1
};
}
答案 2 :(得分：1)
你在一个只有prop的对象上使用map函数，这是不可能的。 json对象唯一的支持是设施
答案 3 :(得分：1)
var stateSet = function(data) {
this.setState({data: json1});
};
为什么使用函数（日期），这不是必需的。只需给出function（），因为我认为stateSet首先不会在任何地方被调用，所以它不会被触发，你期望在该函数中使用prop。
答案 4 :(得分：1)
根据您的问题，很明显您正在尝试访问设施对象中的设施数组。
你可以这样做：
this.state.data.facilities.facility.map((elementOffFacilityArray,index) =>
{
// do whatever you would like to do with individual elements of the array.
})
但是当这个map函数执行时，可能是这个设施数组可能是空的，这将导致@nrgwsth已经指出错误。因此，您必须保持检查，此案例的上述表达式将变为：
{
this.state.data &&
this.state.data.facilities &&
this.state.data.facilities.facility ?
this.state.data.facilities.facility.map((elementOffFacilityArray,index) =>
{
// do whatever you would like to do with individual elements of
the array.
})
:
''
}