React Rerender动态组件(Solr) [英] React Rerender dynamic Components (Solr)
问题描述
我对ReactJS有点陌生
I am somewhat new to ReactJS
我有一个React类，它渲染了许多项目:(示例)
I have a react class that is rendering a number of items: (Sample)
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}
<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％地确定如何重新渲染整个项目，或者只是重新渲染单个项目.
I have a button within the table that makes a call out to SOLR to perform a delta import, then re-calls the select function in order to grab the new data. I'm obviously doing the handleUpdateEvent function incorrectly, however, I'm not 100% sure how to go about getting either the entire thing to re-render, or just the individual item to re-render.
(希望我已经明白了...)
(Hopefully I've made sense...)
感谢您的帮助.
(onSearch函数)
(onSearch Function)
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();
});
},
推荐答案
要更改的第一件事是使用 React.createClass .在支持ES6语法的情况下已弃用此方法.另外，我不建议在React旁边使用jQuery.这不是不可能的事，但是还有其他事情要考虑.详细阅读.我将在这里使用它，但考虑使用诸如 fetch 或 axios (或许多其他库之一)之类的方法来获取数据.
The first thing to change is the use of React.createClass. This has been depracated in favour ES6 syntax. Also, I dont't suggest using jQuery along side React. It's not impossible to do, but there are other things to consider. Read this for more. I'll use it here, but consider something like fetch or axios (or one of the many other libraries) for fetching the data.
我认为您的方向正确，但有几件事需要更新.由于可用选项正在更改，因此我将其置于组件状态，然后让 handleUpdateEvent 函数更新状态，这将触发重新渲染.
I think you're on the right track, but a few things to update. Because the available options are changing, I would put them into the components state, then having the handleUpdateEvent function update the state, which will trigger a re-render.
您的课程看起来像这样:
Your class would look something like this:
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}
<button type="button" onClick={ () => { this.handleUpdateEvent(item.id) } } title="Refresh Amount" >Refresh</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
))
}
</div>
);
}
}
这篇关于React Rerender动态组件(Solr)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
