React Rerender 动态组件 (Solr)

IT技术 javascript ajax reactjs solr
2021-05-14 17:32:41

我对 ReactJS 有点陌生

我有一个正在渲染许多项目的react类：（示例）

    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 来执行增量导入，然后重新调用选择函数以获取新数据。我显然没有正确地执行 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();
                });

            },
1个回答

首先要改变的是使用React.createClass. 这已被弃用，以支持 ES6 语法。另外，我不建议在 React 旁边使用 jQuery。这并非不可能，但还有其他事情需要考虑。阅读本文了解更多信息。我将在这里使用它，但考虑使用类似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>
    );
  }
}
其它你可能感兴趣的问题
上一篇设计卡片样式会导致 TextField 在 Material UI + React 中失去焦点 下一篇Materialui - 从哪里加载 CSS 类？第2部分