Kết xuất các thành phần React từ Mảng đối tượng

Tôi có một số dữ liệu được gọi là các trạm là một mảng chứa các đối tượng.

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

Tôi muốn hiển thị một thành phần ui cho mỗi vị trí mảng. Cho đến nay tôi có thể viết

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

Và sau đó kết xuất

render(){
 return (
   {stationsArr}
 )
}

Vấn đề là tôi đang in tất cả dữ liệu ra. Thay vào đó, tôi muốn chỉ hiển thị một khóa như thế {this.data.call}nhưng không in ra gì.

Làm cách nào để tôi có thể lặp qua dữ liệu này và trả về một phần tử giao diện người dùng mới cho mỗi vị trí của mảng?

Bạn có thể ánh xạ danh sách các trạm tới ReactElements.

Với React> = 16, có thể trả về nhiều phần tử từ cùng một thành phần mà không cần thêm một trình bao bọc phần tử html. Kể từ ngày 16.2, có một cú pháp mới <> để tạo các phân mảnh. Nếu điều này không hoạt động hoặc không được IDE của bạn hỗ trợ, bạn có thể sử dụng <React.Fragment>thay thế. Trong khoảng từ 16.0 đến 16.2, bạn có thể sử dụng một polyfill rất đơn giản cho các đoạn.

Hãy thử những điều sau đây

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

Đừng quên keythuộc tính!

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

Tôi có một câu trả lời có thể hơi khó hiểu cho những người mới như tôi. Bạn chỉ có thể sử dụng maptrong phương thức kết xuất các thành phần.

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

this.data có lẽ chứa tất cả dữ liệu, vì vậy bạn cần phải làm như sau:

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

Hoặc bạn có thể sử dụng mapvà các hàm mũi tên nếu bạn đang sử dụng ES6:

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

Có một số cách có thể được sử dụng.

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

Giải pháp 1

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

Giải pháp 2

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

Tất nhiên cũng có những cách khác.