English 我有一些称为站的数据，它是一个包含对象的数组。
stations : [
{call:'station one',frequency:'000'},
{call:'station two',frequency:'001'}
]
我想为每个数组位置渲染一个ui组件。到目前为止，我可以写
var stationsArr = []
for (var i = 0; i < this.data.stations.length; i++) {
stationsArr.push(
<div className="station">
{this.data}
</div>
)
}
然后渲染
render(){
return (
{stationsArr}
)
}
问题是我要打印所有数据。相反，我只想显示一个像这样的键，{this.data.call}但是什么也不打印。
如何遍历此数据并为数组的每个位置返回一个新的UI元素？
this.data 大概包含所有数据，因此您需要执行以下操作：
var stations = [];
var stationData = this.data.stations;
for (var i = 0; i < stationData.length; i++) {
stations.push(
<div key={stationData[i].call} className="station">
Call: {stationData[i].call}, Freq: {stationData[i].frequency}
</div>
)
}
render() {
return (
<div className="stations">{stations}</div>
)
}
或者map，如果您使用的是ES6，则可以使用和箭头功能：
const stations = this.data.stations.map(station =>
<div key={station.call} className="station">
Call: {station.call}, Freq: {station.frequency}
</div>
);
对于一个像我这样的新手，我的答案可能会有些混乱。您可以
map在组件内部使用render方法。