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メソッドを呼び出さない限りレンダリングメソッドを呼び出すことはありません。

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