정렬을 클릭하면 데이터 테이블에서 데이터가 제거됩니다. Reactjs Javascript

Question

나는 반응에서 datatable을 사용하고 있습니다. 내가 (THEAD에) 정렬을 클릭하면이 모든 데이터를 제거하고 내가 여기 어떻게 생각해 테이블 ​​

에서 사용할 수 데이터가, TBODY이 DataTable을 초기화하기 전에 렌더링되는 것이 없다 말한다. 아니면 그런 식으로.

여기 PasteBin

내 코드입니다 그리고 여기 componentDidMount

componentDidMount(){ 
     employessData = thisclass.props.data; 

     thisclass.setState({ 
      stateReady: true 
     }) 
     var self = this; 
     $('#mytableEmp').dataTable({ 
      "columnDefs": [ 
       { "width": "20px", "targets": 0 } 
      ], 
      "pagingType": "numbers", 
      "bAutoWidth": false, 
      "bDestroy": true,  
      "fnDrawCallback": function() {    
       self.forceUpdate();   
      } 
     }); 
     $('#checkboxhead').removeAttr('area-sort').removeClass('sorting_asc'); 
     $(".checkAllCBEmp").click(function() { 
      $('#mytableEmp tbody input[type="checkbox"]').prop('checked', this.checked); 
     }); 

     $("#searchtabletb").on("keyup", function() { 
      var value = $(this).val(); 
      value = value.toLowerCase(); 
      console.log(value); 
      $("#mytableEmp tr").each(function(index) { 
       if (index != 0) { 
        var row = $(this); 

        var id = row.find("td").text(); 
        id = id.toLowerCase(); 
        if (id.indexOf(value) === -1) { 
         $(this).hide(); 
        } 
        else { 
         $(this).show(); 
        } 
       } 
      }); 
     }); 
} 

을 일부 코드 그리고 여기 기능을 렌더링 에서 코드입니다.

render() { 

    return (


       <table className="table table-stripped" id="mytableEmp"> 
        <thead> 
        <tr className="table-head-row"> 
         <th id="checkboxhead" className="firsttd"> 
         <div className="round-cb"> 
          <input type="checkbox" id="cb1_emp" className="checkAllCBEmp" /> 
          <label htmlFor="cb1_emp"></label> 
         </div> 
         </th> 
         <th>Title</th> 
         <th>Type</th> 
         <th>Created on</th> 
         <th>From</th> 
         <th>To</th> 
         <th>Processed</th> 
         <th>Amount</th> 
         <th>Status</th> 
         <th id="detailarrowhead" className="lasttd"></th> 
        </tr> 
        </thead> 
        <tbody> 
        { 
        this.state.stateReady ? 
         employessData.map((heading, index) => { 
         return(<tr role="row" className="tablerow" key={index}> 
          <td className="firsttd"> 
          <div className="round-cb"> 
           <input type="checkbox" value="cb1" id={heading.userId} /> 
           <label htmlFor={heading.userId}></label> 
          </div> 
          </td> 
          <td> 

          <div className="emp-avatar"> 
           <img src={heading.profile_picture} /> 
          </div> 

          <div className="emp-title-div"> 
          <div className="emp-title"> 
           <div> 
           {heading.name} 
           </div> 
          </div> 
          </div> 
          </td> 
          <td>c</td> 
          <td>Texto 2</td> 
          <td>Texto 2</td> 
          <td>Texto 2</td> 
          <td>Texto 2</td> 
          <td>Texto 2</td> 
          <td><span className="badge badge-red">Rejected</span></td> 
          <td className="lasttd"><Link to="/emp-profile" className="table-details-btn" onClick={() => {this.addlocalid(heading.userId)}}>View User</Link></td> 
         </tr>) 
        }) 
        : 
        "" 
        } 
        /tbody> 
       </table> 

    ) 
    } 

Answer 1

당분간이 문제가 해결되었습니다.

나는 "나는 정말 내 DOM을 구축하기 위해 함께 jQuery를 반응 사용해야한다"되는 기능

setTimeout(function(){  
$('#mytableEmp').dataTable({ 
       "columnDefs": [ 
        { "width": "20px", "targets": 0 } 
       ], 
       "pagingType": "numbers", 
       "bAutoWidth": false, 
       "bDestroy": true,  
       "fnDrawCallback": function() {    
        self.forceUpdate();   
       } 
      }); 
}, 3000); 

Answer 2

employessData의 범위는 이상이므로 thisclass.

let employessData = this.props.data; 
this.state.stateReady ? 
    employessData.map(...); 

을하고 (여기에 표시되지이다) this.props.data이 구성 요소가받는 이유/하늘의 경우는 이해 :

당신은 render 대신이 작업을 수행 할 것입니다.