Reagieren - setState() auf unmontierten Bauteil

In meine reagieren Komponente im Versuch, implementieren Sie einen einfachen spinner, während eine ajax-Anfrage ist in Bearbeitung - im Einsatz von state zu speichern, die den lade-status.

Für einige Grund, dieses Stück code unten in meine Reagieren Komponente wirft dieser Fehler

Können nur aktualisieren montiert oder bei der Montage des Bauteils. Dies bedeutet in der Regel
Sie rief setState() auf eine nicht montierte Komponente. Dies ist ein no-op.
Bitte überprüfen Sie den code für die Undefinierte Komponente.

Wenn ich loszuwerden, die ersten setState-Aufruf der Fehler geht Weg.

JS:

constructor(props) {
  super(props);
  this.loadSearches = this.loadSearches.bind(this);

  this.state = {
    loading: false
  }
}

loadSearches() {

  this.setState({
    loading: true,
    searches: []
  });

  console.log('Loading Searches..');

  $.ajax({
    url: this.props.source + '?projectId=' + this.props.projectId,
    dataType: 'json',
    crossDomain: true,
    success: function(data) {
      this.setState({
        loading: false
      });
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
      this.setState({
        loading: false
      });
    }.bind(this)
  });
}

componentDidMount() {
  setInterval(this.loadSearches, this.props.pollInterval);
}

render() {

    let searches = this.state.searches || [];


    return (<div>
          <Table striped bordered condensed hover>
          <thead>
            <tr>
              <th>Name</th>
              <th>Submit Date</th>
              <th>Dataset &amp; Datatype</th>
              <th>Results</th>
              <th>Last Downloaded</th>
            </tr>
          </thead>
          {
          searches.map(function(search) {

                let createdDate = moment(search.createdDate, 'X').format("YYYY-MM-DD");
                let downloadedDate = moment(search.downloadedDate, 'X').format("YYYY-MM-DD");
                let records = 0;
                let status = search.status ? search.status.toLowerCase() : ''

                return (
                <tbody key={search.id}>
                  <tr>
                    <td>{search.name}</td>
                    <td>{createdDate}</td>
                    <td>{search.dataset}</td>
                    <td>{records}</td>
                    <td>{downloadedDate}</td>
                  </tr>
                </tbody>
              );
          }
          </Table >
          </div>
      );
  }

Die Frage ist, warum bin ich immer diese Fehlermeldung, wenn die Komponente sollte schon montiert werden (wie der aufgerufen wird, von componentDidMount) ich dachte, es war sicher Status setzen, sobald die Komponente montiert ist ?

  • in meinem Konstruktor ich die Einstellung "diesem.loadSearches = diese.loadSearches.bind(this);" krank ist, hinzufügen, dass die Frage
  • haben Sie versucht, die Einstellung der be auf null im Konstruktor? Das funktioniert vielleicht. this.state = { loading : null };
InformationsquelleAutor Marty | 2015-10-02
Schreibe einen Kommentar