Question

我有一些名为station的数据，它是一个包含对象的数组。

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.push(
         <div className="station">
             {this.data}
         </div>
     )
 }

我想为每个数组位置渲染一个ui组件。到目前为止我可以写

render(){
 return (
   {stationsArr}
 )
}

然后渲染

{this.data.call}

问题是我正在打印所有数据。我想要只显示像pyinstaller -D -F -n main -c "main.py"这样的键，但不打印任何内容。

如何遍历此数据并为数组的每个位置返回一个新的UI元素？

Answer 1

您可以将电台列表映射到ReactElements。

使用React＆gt; = 16，可以从同一组件返回多个元素，而无需额外的html元素包装。从16.2开始，有一个new syntax <>来创建片段。如果这不起作用或IDE不支持，则可以使用<React.Fragment>代替。在16.0和16.2之间，您可以使用非常简单的polyfill表示片段。

尝试以下

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div className="station" key={station.call}>{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/

Answer 2

对于像我这样的新手，我的答案可能会有点混乱。您可以在组件呈现方法中使用map。

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

Answer 3

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

Answer 4

有两种方法可以使用。

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>

当然，还有其他方法可用。

Answer 5

这很可能是实现您想要的最简单的方法。

为了在这种情况下使用此map函数，我们将必须传递一个currentValue（始终是必需的）参数和一个index（可选）参数。在下面的示例中，station是我们的currentValue，而x是我们的index。

station表示迭代对象时数组中对象的当前值。 x自动递增；每次映射新对象时，它增加一。

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

托马斯·瓦拉德兹（Thomas Valadez）的回答虽然提供了最佳/最简单的方法来渲染对象数组中的组件，但未能正确解决在此过程中分配键的方式。

从对象数组渲染React组件

5 个答案: