如何使用reactjs将对象数组打印到表中？

Question

我只想打印从firebase获得的数组。 您可以在图像中看到阵列数据。

在其中我可以轻松地将json对象数据转换为数组，但无法在表中打印数组数据。 如果我当时在标签上运行console.log命令，它将打印控制台数据，但不打印我从firebase获得的数组值，或者可以说从firebase获取。 我想在表中打印这些数据。

 class Contact extends React.Component { constructor() { super(); this.state = { arr: [], inner_key:[], Address:'', printabledata:[], singledata:{} }; self = this; this.printAllRecord = this.printAllRecord.bind(this); } componentWillMount() { var formdata2 = firebase.database().ref("vishal-aaede/"); formdata2.on("value", function (snap) { data = snap.val(); self.setState({arr: data}); }); } componentDidUpdate(){ var data=this.state.arr, headerArray=[]; for (var key in data){ headerArray.push(key); }console.log(headerArray); headerArray.forEach(function(val){ self.printAllRecord(data[val]) console.log(data[val].Name); } ); self.state.singledata=data[headerArray[0]] ; } printAllRecord(param,index){ self.state.printabledata.push(<tr> <td>{param.Name}</td> <td>{param.Round}</td> <td>{param.Email}</td> <td>{param.Date}</td> <td>{param.Phone}</td> <td>{param.Address}</td> <td>{param.Fresher}</td> <td>{param.Time}</td> </tr>); } render() { return ( <div> <h2>Candidate RECORD Coming Soon!!!!</h2> <p>Write Filter Code here </p> <div> <div className="row"> <div className="col-sm-2"></div> <div className="col-sm-8"> <div className = "container-fluid table-responsive"> <table className = "table table-bordered"> <thead> <tr> <th>Name</th> <th>Interview Round</th> <th>Email</th> <th>Date</th> <th>Phone Number</th> <th>Address</th> <th>Gender</th> <th>Experience</th> <th>Time</th> </tr> </thead> <tbody> {this.state.printabledata} </tbody> </table> </div> </div> <div className="col-sm-2"></div> </div> </div> </div> ) } } 

Answer 1

您使用错误的方法来重复元素。 如果你想loop通过array元素，那么你应该使用array.map方法。 您可以在此处找到一些有关我们如何在react中打印元素列表的参考。

Answer 2

您可以使用地图来做

this.state.data.map(function(key,map) {
    <table>
        <tr></tr>
        <td>{map.name}</td?
        ....whole code
    </table>
})