Reagieren rerender dynamische Komponenten (Solr)

Question

ich ReactJS etwas neues am

Ich habe eine reagieren Klasse, die eine Anzahl von Elementen rendert: (Probe)

var app = app || {}; 

app.Results = React.createClass({ 


    componentDidMount: function() { 

    }, 

    handleUpdateEvent: function(id){ 


     var _self = this; 

     var handler = function() 
     { 
      var query = _self.props.results.query; 
      _self.props.onSearch(query); // re-does the search to re-render items ... 
      // obviously this is wrong since I have to click the button twice to see the results 
      // 
     } 
     var optionsURL = {dataType: 'json'}; 
     optionsURL.type= 'POST'; 
     optionsURL.url = 'http://localhost:8983/solr/jcg/dataimport?command=delta-import&clean=false&commit=true&json.nl=map&wt=json&json.wrf=?&id='+id; 
     // updates index for specific item. 

     jQuery.ajax(optionsURL).done(handler); 

    }, 


    render: function() { 
     var tdLabelStyle = { 
      width: '150px' 

     } 
     return (
      <div id="results-list"> 

       {this.props.results.documents.map(function (item) { 

        return (
         <div id={item.id} key={item.id} className="container-fluid result-item"> 
          <div className="row"> 
           <div className="col-md-6"> 
          <table> 
           <tr><td colspan="2">{item.name}</td></tr> 
           <tr style={{marginTop:'5px'}}><td style={tdLabelStyle}><b>Amount:</b></td><td>{item.amount}&nbsp;&nbsp; 
            <button type="Submit" onClick={() => {this.handleUpdateEvent(item.id)}} title="Refresh Amount" >Refresh</button> 
           </td></tr> 

          </table> 
           </div> 

          </div> 
         </div> 

        ) 

       },this)}    

      </div> 
     ); 
    } 
}); 

ich einen Knopf in der Tabelle haben Dies ruft SOLR auf, um einen Delta-Import durchzuführen, und ruft dann die Auswahlfunktion erneut auf, um die neuen Daten zu erfassen. Ich mache offensichtlich die HandleUpdateEvent Funktion falsch, aber ich bin nicht 100% sicher, wie man entweder die gesamte Sache zum Rendern bekommen, oder nur das einzelne Objekt zum Rendern.

(Hoffentlich habe ich einen Sinn ...)

Jede Hilfe ist willkommen.

(onSearch Funktion)

handleSearchEvent: function (query) { 

       if (this.state.query != null) 
        { 
         if (this.state.query.filters != null) 
          { 
           query.filters = this.state.query.filters; 
          } 
        } 
       $("#load-spinner-page").show(); 
       if (app.cache.firstLoad) { 
        $("body").css("background","#F8F8F8"); 
        app.cache.firstLoad = false; 
       } 
       var _self = this; 
       app.cache.query = query; 
       docSolrSvc.querySolr(query, function(solrResults) { 
        _self.setState({query: query, results: solrResults}); 
        $("#load-spinner-page").hide(); 
       }); 

      }, 

Answer 1

Das erste, was ist die Verwendung von React.createClass zu ändern. Dies wurde zugunsten der ES6-Syntax deklariert. Außerdem schlage ich nicht vor jQuery neben React zu verwenden. Es ist nicht unmöglich zu tun, aber es gibt andere Dinge zu berücksichtigen. Read this for more. Ich werde es hier verwenden, aber betrachten Sie etwas wie fetch oder axios (oder eine der vielen anderen Bibliotheken) zum Abrufen der Daten.

Ich denke, Sie sind auf dem richtigen Weg, aber ein paar Dinge zu aktualisieren. Da sich die verfügbaren Optionen ändern, würde ich sie in den Komponentenstatus versetzen und dann die Funktion handleUpdateEvent den Status aktualisieren lassen, was ein erneutes Rendern auslösen würde.

Ihre Klasse würde wie folgt aussehen:

class Results extends React.Component { 
    constructor(props) { 
    super(props); 

    // this sets the initial state to the passed in results 
    this.state = { 
     results: props.results 
    } 
    } 

    handleUpdateEvent(id) { 
    const optionsURL = { 
     dataType: 'json', 
     type: 'POST', 
     url: `http://localhost:8983/solr/jcg/dataimport?command=delta-import&clean=false&commit=true&json.nl=map&wt=json&json.wrf=?&id=${ id }` 
    }; 

    // Instead of calling another function, we can do this right here. 
    // This assumes the `results` from the ajax call are the same format as what was initially passed in 
    jQuery.ajax(optionsURL).done((results) => { 
     // Set the component state to the new results, call `this.props.onSearch` in the callback of `setState` 
     // I don't know what `docSolrSvc` is, so I'm not getting into the `onSearch` function 
     this.setState({ results },() => { 
     this.props.onSearch(results.query); 
     }); 
    }); 
    } 

    render() { 
    const tdLabelStyle = { 
     width: '150px' 
    }; 

    // use this.state.results, not this.props.results 
    return (
     <div id="results-list"> 
     { 
      this.state.results.documents.map((item) => (
      <div> 
       <div id={ item.id } key={ item.id } className="container-fluid result-item"> 
       <div className="row"> 
        <div className="col-md-6"> 
        <table> 
         <tr><td colspan="2">{item.name}</td></tr> 
         <tr style={{marginTop:'5px'}}> 
         <td style={ tdLabelStyle }><b>Amount:</b></td> 
         <td>{item.amount}&nbsp;&nbsp; 
          <button type="button" onClick={() => { this.handleUpdateEvent(item.id) } } title="Refresh Amount" >Refresh</button> 
         </td> 
         </tr> 
        </table> 
        </div> 
       </div> 
       </div> 
      </div> 
     )) 
     } 
     </div> 
    ); 
    } 
}