Reagiere js - aktualisiere Tabellenzeilen nach dem Ajax-Aufruf

Question

Ich kann nicht herausfinden, was mit dem Code unten falsch ist. Die Tabellenzeilen werden nach dem Klicken auf "Senden" nicht aktualisiert.

Ich dachte this.setState ({data: arr}) innerhalb von manipulateData() würde es tun, aber es tut es nicht.

Jede Hilfe würde sehr geschätzt werden. Vielen Dank.

/* 
v1.0 
*/ 

var cols = [ 
    { key: 'sessionid1', label: 'Session 1' }, 
    { key: 'type', label: 'Type' }, 
    { key: 'sessionid2', label: 'Session 2' } 
]; 

var data = [ 
    { id: 1, sessionid1: 'acb20dc0', type: 'CLIENT', sessionid2: 'acb20dc0' }, 
    { id: 2, sessionid1: 'acb20dc0', type: 'CLIENT', sessionid2: 'acb20dc0' }, 
    { id: 3, sessionid1: 'acb20dc0', type: 'SERVER', sessionid2: 'acb20dc0' }, 
    { id: 4, sessionid1: 'acb20dc0', type: 'CLIENT', sessionid2: 'acb20dc0' } 
]; 

var Logviewer = React.createClass({ 
    getInitialState: function() { 
     return { 
      text: '', 
      kibana: false, 
      data: [], 
      cols: cols 
     }; 
    }, 

    render: function(){ 
     return(
      <div> 
       <div className="row header"> 
        <Header 
        text={this.state.text} 
        kibana={this.state.kibana} 
        /> 
       </div> 

       <div className="row"> 
        <TabularData cols={this.props.cols} data={this.state.data} /> 
        <Graphic /> 
       </div> 
      </div> 
     ); 
    } 
}); 

var Header = React.createClass({ 
    handleSubmit: function(){ 
     console.log('submit - ', this.state.data); 
     $.ajax({ 
       url: 'http://10.164.98.27:7474/db/data/cypher', 
       dataType: 'json', 
       type: 'POST', 
       data: this.state.queryData, 
       success: function(data) { 
       console.log('data: ', data); 
       // manipulate data first to correct format 
       this.manipulateData(data); 
       }.bind(this), 
       error: function(xhr, status, err) { 
       //this.setState({data: this.state.data}); 
       console.error(this.props.url, status, err.toString()); 
      }.bind(this) 
     });  
    }, 

    manipulateData: function(obj){ 
     console.log('manipulateData'); 
     var arr = []; 
     for(var i = 0; i < obj.data.length; i++){ 
      //console.log('size: ', i); 
      arr.push({id: i, sessionid1: obj.data[i][0].data.sessionid, type: obj.data[i][1], sessionid2: obj.data[i][2].data.sessionid});  
     } 
     console.log('manipulated obj: ', arr); 
     this.setState({data: arr});// this was supposed to update the table content but doesn't 
     $('#tabularDataTable').show(); 
    }, 

    handleCheckbox: function(){ 
     if($('#leftHandSide').is(':visible')){ 
      $('#leftHandSide, #rightHandSide').hide(); 
     } 
     else{ 
      $('#leftHandSide, #rightHandSide').show(); 
     } 
    }, 

    handleSessionIdChange: function(e){ 
     console.log('sessionId: ', e.target.value); 
     var query = { 
       "query" : "MATCH (a {sessionid : '" + e.target.value + "'})-[r*]-(b) UNWIND r AS rel RETURN distinct startNode(rel) AS a, type(rel), endNode(rel) AS b", 
        "params" : { } 
     } 
     this.setState({queryData: query}); 
    }, 

    render: function() { 
     return (
     <div className="columns small-12"> 
      <div className="columns small-2 logo"> 
       <img src="../images/247ToolsLogo.png" className="tools-logo" title="247 tools logo" /> 
      </div> 
      <div className="columns small-2 tool-name">Log Viewer</div> 
      <div className="columns small-8 search"> 
       <form className="sessionIdForm"> 
        <input 
         type="text" 
         placeholder="Session Id" 
         //defaultValue={this.state.text} 
         defaultValue={this.props.text} 
         onBlur={this.handleSessionIdChange} 
        /> 
        <a href="#" id="submit" onClick={this.handleSubmit} className="button">Find related session ids</a> 
        <div id="kibana"><input type="checkbox" id="kibanaCheckbox" checked={this.props.kibana} onClick={this.handleCheckbox} /><label htmlFor="kibanaCheckbox">Redirect to Kibana</label></div> 
       </form> 
      </div> 
     </div> 
    ); 
    } 
}); 

var TabularData = React.createClass({ 
    render: function(){ 
     console.log('TabularData - 1'); 
     return(
      <div className="columns small-6" id="leftHandSide"> 
       <h4>Table View</h4> 
       <Table cols={this.props.cols} data={this.props.data} /> 
      </div> 
     ); 
    } 
}); 

var Table = React.createClass({ 
    render: function() { 
     console.log('Table - render'); 
     var headerComponents = this.generateHeaders(), 
      rowComponents = this.generateRows(); 

     return (
      <table id="tabularDataTable"> 
       <thead>{headerComponents}</thead> 
       <tbody>{rowComponents}</tbody> 
      </table> 
     ); 
    }, 

    generateHeaders: function() { 
     var cols = this.props.cols; // [{key, label}] 

     // generate our header (th) cell components 
     return cols.map(function(colData) { 
      return <th key={colData.key}>{colData.label}</th>; 
     }); 
    }, 

    generateRows: function() { 
     var cols = this.props.cols, // [{key, label}] 
      data = this.props.data; 

     return data.map(function(item) { 
      // handle the column data within each row 
      var cells = cols.map(function(colData, i) { 
       if(i === 0 || i === 2){ 
        return <td key={i}><a target="_blank" href={"https://logview01.pool.sv2.247-inc.net/#/discover?time:(from:now-30d,mode:quick,to:now))&amp;_a=(columns:!(_source),index:'logstash-shared-services-*',interval:auto,query:(query_string:(analyze_wildcard:!t,query:&quot;" + item[colData.key] + "&quot;)),sort:!('@timestamp',desc))&amp;_g=(refreshInterval:(display:Off,pause:!f,section:0,value:0),time:(from:now-30d,mode:quick,to:now))"}>{item[colData.key]}</a></td>; 
       } 
       else{ 
        return <td key={i}>{item[colData.key]}</td>; 
       } 
      }); 
      return <tr key={item.id}>{cells}</tr>; 
     }); 
    } 
}); 

var Graphic = React.createClass({ 
    render: function(){ 
     return(
      <div className="columns small-6" id="rightHandSide"> 
       <h4>Graphic View</h4> 
      </div> 
     );  
    } 
}); 

ReactDOM.render(
    <Logviewer data={data} cols={cols} />, 
    document.getElementById('content') 
); 

Answer 1

Das Problem ist, dass Sie den Zustand für die Header Komponenten sind einstellen. Was passiert, ist, dass Ihr LogViewer seinen eigenen Zustand hat, der einen Satz von Daten enthält, während Ihr Header auch seinen eigenen Zustand mit einem separaten Satz von Daten hat. Und da die TabularData Komponente die Daten aus dem LogViewer Zustand (über Requisiten) bekommt, weiß sie nie etwas über die aktualisierten Daten.

Sie können dies auf verschiedene Arten lösen. Eine Möglichkeit besteht darin, den Datenabruf und den setState-Anruf stattdessen zu LogViewer zu verschieben. Eine andere ist es, eine Callback-Funktion, die als Requisiten überliefert, auf die Header Komponente aus den LogViewer, etwa wie folgt:

<Header 
    text={this.state.text} 
    kibana={this.state.kibana} 
    onDataFetch={(data) => { this.setState({ data }) } 
/> 

Und dann, in Ihrem Header Komponente, rufen Sie this.props.onDataFetch(arr) statt this.setState({data: arr}).