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

【问题标题】：How can I print array of object into my table using reactjs?如何使用 reactjs 将对象数组打印到我的表中？
【发布时间】：2018-03-23 21:35:31
【问题描述】：

我只想打印从 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>
               )
             }
            }

【问题讨论】：

你不应该直接操纵state，使用this.setState，检查this。

标签： javascript arrays reactjs firebase-realtime-database

【解决方案1】：

您使用错误的方法重复元素。如果你想loop 到array 元素，那么你应该使用array.map 方法。您可以在这里找到一些关于我们如何print a list of elements in react 的参考。

【讨论】：

谢谢你 arun，你能不能更新这个代码，如果你这样做会很有帮助。

【解决方案2】：

你可以用地图来做

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

【讨论】：

粘贴在花括号内，或者你可以创建一个像 const table=//code 这样的变量，然后在 div 标签中使用它作为