使用reactjs打印表中的數據和麪試官的過濾器數據？

Question

我使用reactjs創建訪問表單，其中我使用路徑訪問不同的鏈接。我正在使用firebase來存儲數據。

class Contact extends React.Component { 
      constructor() { 
      super(); 
      this.state = { 
       arr: [], 
       records:[], 
       Address:'', 
       printabledata:[], 
       singledata:{}, 
       date:'', 
       iround:'' 

      }; 
      self = this; 
       this.printAllRecord = this.printAllRecord.bind(this); 
       this.filterByInterviewer = this.filterByInterviewer.bind(this); 
       this.filterByDate = this.filterByDate.bind(this); 
       this.handleChangedate = this.handleChangedate.bind(this); 
       this.handleChangeiround = this.handleChangeiround.bind(this); 
         } 
         handleChangedate(event) { 
          this.setState({date: event.target.value.toUpperCase()}); 
         } 
         handleChangeiround(event) { 
          this.setState({iround: event.target.value}); 
         } 


      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]); 
      self.state.records.push(data[val]); 
       console.log(data[val].Address); 
      }); 
      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.Gender}</td> 
       <td>{param.Fresh}</td> 
       <td>{param.time}</td> 
      </tr>);  
      } 
     filterByInterviewer(){ 
      self.state.records.forEach(function(val){ 
      if(val.Round==self.state.iround){ 
      self.printAllRecord(val); 
      console.log(val.Round+" - "+val.Name); 
      } 
     }); 
     } 
     filterByDate(){ 
     self.state.records.forEach(function(val){ 
      if(val.Date==self.state.date){ 
      self.printAllRecord(val); 
      console.log(val.Date+" - "+val.Name); 
      } 
     }); 
     } 
      render() { 
       return (
       <div> 
        <h2>Candidate RECORD !!!!</h2> 
        <div> 
         <div> 
         <div className = "container"> 
          <form classNameName = "form-horizontal" name = "record_form" id = "record_form">    
          <div className = "form-group row"> 
           <label className = "control-label col-lg-4" htmlFor = "filterdatetxt">Date:</label> 
           <div className = "col-lg-5"> 
           <input type = "date" className = "form-control" ref = "filterdatetxt" name = "filterdatetxt" id = "filterdatetxt" placeholder = "Enter Date" onChange={this.handleChangedate} /> 
           </div> 
          <div className = "col-lg-3"> 
           <button name = "filter_date_btn" id = "filter_date_btn" type = "button" className = "btn btn-danger" onClick={this.filterByDate}>Filter By Date</button> 
          </div> 
          </div> 
          <div className = "form-group row"> 
           <label className = "control-label col-lg-4" htmlFor = "interview_round">Feedback By Interviewer:</label> 
           <div className = "col-lg-5"> 
           <select className = "form-control" ref = "interview_round" onChange={this.handleChangeiround} id = "interview_round" name = "interview_round" > 
           <option value = "1">Select Round</option> 
            <option value = "HR">HR</option> 
            <option value = "TR">Technical Round</option> 
            <option value = "FR">Final Round</option> 
           </select> 
           </div> 
          <div className = "col-lg-3"> 
           <button name = "filter_date_btn" id = "filter_date_btn" type = "button" className = "btn btn-danger" onClick={this.filterByInterviewer} >Filter By Interviewer</button> 
          </div> 
          </div> 
          <div className = "row"> 
          <div className = "col-lg-3"></div> 
          <div className = "col-lg-3"> 

          </div> 
          <div className = "col-lg-3"> 
          <Link to="/contact"> 
           <button name = "view_all_btn" id = "view_all_btn" type = "button" className = "btn btn-danger" >View All Record</button> 
           </Link> 
          </div> 
          <div className = "col-lg-3"> 
           <IndexLink to="/" activeClassName="active"> 
           <button name = "back_btn" id = "back_btn" type = "button" className = "btn btn-danger" >Go Back</button> 
           </IndexLink> 
          </div> 
          </div> 
          </form> 
          <div className="blank_div"></div> 
         </div>   
         </div> 
         <div className="row"> 

         <div className="col-sm-12"> 
          <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> 
        </div> 
       </div> 
       ) 
      } 
      } 

這裏是您可以在其中看到了用戶數據的圖像。當用戶填寫訪問表單並提交數據到Firebase時，我會在表格中提取數據。

所以這裏2個過濾器按鈕。主要的問題是，當我點擊時間數據的日期過濾和打印該日期的所有數據。面試官也一樣。

我做的所有的事情，所有的過濾器數據等等控制檯，但我希望它在我的桌子

Answer 1

不應printAllRecord更新狀態？我認爲你正在做的一切正確，但過濾你沒有更新狀態的數據。您正在更新一個狀態對象，但除非您調用方法setState，否則它將永遠不會調用render方法。

printAllRecord(param,index) {  
     let printabledata = self.state.printabledata ? self.state.printabledata : []; 
     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.Gender}</td> 
      <td>{param.Fresh}</td> 
      <td>{param.time}</td> 
     </tr>);  
     } 

     self.setState({printabledata:printabledata}); 
}