陣營重新呈現動態組件（SOLR）是

Question

我有點新的ReactJS

我有一個反應類正在呈現一些項目：（樣本）

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

我有表內的按鈕它會呼叫SOLR執行增量導入，然後重新調用select函數以獲取新數據。 我明顯在做handleUpdateEvent函數，但是，我並不是100％確定要如何讓整個事情重新呈現，或者只是重新呈現個別項目。

（希望我是有道理的......）

任何幫助表示讚賞。

（onSearch功能）

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

首先要改變的是使用的React.createClass。這已經被傾向於ES6語法。另外，我不建議在邊React中使用jQuery。這不是不可能的，但還有其他的事情需要考慮。 Read this for more。我將在這裏使用它，但考慮類似fetch或axios（或許多其他庫之一）來獲取數據。

我認爲你是在正確的軌道上，但有幾件事要更新。因爲可用的選項正在改變，所以我會將它們置於組件狀態，然後讓handleUpdateEvent函數更新狀態，這將觸發重新呈現。

你的類將是這個樣子：

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