利用对象数组渲染反应元件

我有一些数据称为站，这是一个包含对象的数组。

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 元素？

338520 次浏览
小开

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>
)
}

如果你使用 ES6，你也可以使用 map和箭头函数:

const stations = this.data.stations.map(station =>
<div key={station.call} className="station">
Call: {station.call}, Freq: {station.frequency}
</div>
);
小开
最佳答案

您可以将站点列表映射到 ReactElements。

使用 React > = 16，可以从同一个组件返回多个元素，而不需要额外的 html 元素包装器。从16.2开始，就有一个 新语法 < > 来创建片段。如果这不起作用或 IDE 不支持，则可以改为使用 <React.Fragment>。在16.0和16.2之间，可以对片段使用非常简单的 填料。

试试以下方法

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
<>
{stations.map(station => (
<div key={station.call} className='station'>{station.call}</div>
))}
</>
);


// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here


const Test = ({stations}) => (
<div>
{stations.map(station => (
<div className="station" key={station.call}>{station.call}</div>
))}
</div>
);


// old syntax
var Test = React.createClass({
render: function() {
var stationComponents = this.props.stations.map(function(station) {
return <div className="station" key={station.call}>{station.call}</div>;
});
return <div>{stationComponents}</div>;
}
});
 

var stations = [
{call:'station one',frequency:'000'},
{call:'station two',frequency:'001'}
];


ReactDOM.render(
<div>
<Test stations={stations} />
</div>,
document.getElementById('container')
);

不要忘记 key属性！

Https://jsfiddle.net/69z2wepo/14377/

小开

我有个答案，对于我这样的新手来说可能不会那么让人困惑。您可以只在组件呈现方法中使用 map。

render () {
return (
<div>
{stations.map(station => <div key={station}> {station} </div>)}
</div>
);
}
小开

有两种方法可以使用。

const stations = [
{call:'station one',frequency:'000'},
{call:'station two',frequency:'001'}
];
const callList = stations.map(({call}) => call)

解决方案1

<p>{callList.join(', ')}</p>

解决方案2

<ol>
{ callList && callList.map(item => <li>{item}</li>) }
</ol>

Edit kind-antonelli-z8372

当然还有其他的方法。

小开

这很可能是实现您所寻找的目标的最简单的方法。

为了在这个实例中使用这个 map函数，我们必须传递一个 currentValue(始终需要)参数和一个 index(可选)参数。 在下面的例子中，station是我们的 currentValue，而 x是我们的 index。

station表示迭代数组中对象的当前值。 x自动递增; 每映射一个新对象，就递增一个。

render () {
return (
<div>
{stations.map((station, x) => (
<div key={x}> {station} </div>
))}
</div>
);
}

Thomas Valadez 的回答是，虽然它提供了从对象数组中呈现组件的最佳/最简单的方法，但是它没有正确地解决在这个过程中分配键的方法。


提交答案