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

            },

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

React Rerender动态组件（Solr）

1 个答案: