Warum ist meine reagieren Komponente nicht aktualisiert, mit Status-updates?

Habe ich eine Karte-app, die ich gebaut, das erfordert einige map-icons erscheinen/verschwinden nach dem drücken einer Taste, aber ich kann nicht herausfinden, wie, um es zu re-Rendern der Komponente, wenn ich pass in eine neue Sport-Eigenschaft vom Eltern-Komponente :

Eltern Lasten Bauteil:

<SimpleMap sports=[default value and future values go here] />

Einfache Karte Komponente(vereinfacht):

constructor(props) {
  (props);
  this.state = {
    events: [{venue: {lat: 2, lon: 1}}],
    sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"]
  };
};

componentWillReceiveProps (nextProps) {
  this.setState({events: [{venue: {lat: 2, lon: 1}}],
                  sports: nextProps.sports});
  console.log(nextProps.sports);
}

static defaultProps = {
  center: {lat: 36.160338, lng: -86.778780},
  zoom: 12,
  sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"],
};

makeMapEvents (insertProps) {
  fetch("./json/meetup.json").then((response) => {
    return response.json()
  }).then((response) => {
    /* eventually returns new events object based on insertProps */
    this.setState({events: response});
  }
};

componentDidMount () {
  this.makeMapEvents(this.state.sports);
  console.log("mounted", this.state.sports);
}

Landet schließlich hier, um anzeigen von Ereignissen aus-Zustand:

<GoogleMap>
  {this.state.events.map((result) => {
     return (<Marker key={counter++} lat={result.venue.lat} lng={result.venue.lon} 
                sport={this.props.sport} data={result}/>);
  })}
</GoogleMap>
  • Wo ist der counter variable definiert? Außerdem sollten Sie ziemlich viel verwenden Sie niemals ein index-Wert als ein key Eigenschaft in Reagieren. Verwenden Sie immer einen eindeutigen Bezeichner für jede loop-Komponente gerendert, sonst kann es zu seltsam Verhalten, wenn Elemente entfernt oder neu angeordnet werden.
  • Es ist anderswo definiert. Ich habe es vereinfacht. Es ist nur eine Zahl. Danke für den Tipp.
InformationsquelleAutor deek | 2016-07-05
  1. 6

    Reagieren ES6-Klassen nicht autobind this standardmäßig auf nicht-reagieren base member-Methoden. Daher ist der Kontext für this in Ihrer Funktion makeMapEvents ist nicht richtig gebunden. Es gibt 2 Möglichkeiten, dieses Problem zu beheben:

    Über ES7 Eigenschaft Initialisierung:

    makeMapEvents = (insertProps) => {
  fetch("./json/meetup.json").then((response) => {
    return response.json()
  }).then((response) => {
    /* eventually returns new events object based on insertProps */
    this.setState({events: response});
  })
};

    Durch Bindung im Konstruktor:

    constructor(props) {
  (props);
  this.state = {
    events: [{venue: {lat: 2, lon: 1}}],
    sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"]
  };

  this.makeMapEvents = this.makeMapEvents.bind(this) //<< important line


}
    InformationsquelleAutor David Xu
  2. 2
    .then((response) => {
    this.setState({events: resp});
}

    Nehmen Sie in parameter response dann versuchen, zu verwenden resp, das nicht die variable, die Sie wollen.

    • Sorry, Sie war ein Tippfehler, wenn ich kopiert es wieder und entfernt die nicht benötigte code. Es war richtig ursprünglich und nicht das problem(der fetch-ajax-code geklappt).
    InformationsquelleAutor krs
  3. 1

    Die wahrscheinliche Ursache ist, dass Ihre makeMapEvents() - Funktion nicht die korrekte lexikalische Wert von this beim Aufruf this.setState() und als Ergebnis der code nicht funktioniert. Ändern Sie die makeMapEvents() Funktionsdefinition zu verwenden Pfeil-Funktion (() => {}) und korrekte lexikalisch gebundene Wert sich dies als:

    makeMapEvents = (insertProps) => {
  fetch("./json/meetup.json").then((response) => {
    return response.json()
  }).then((response) => {
    this.setState({events: response});
  }); //<-- Typo here. The closing parenthesis is missing
};

    Außerdem ist ein Tippfehler im code, wobei die schließende Klammer fehlt, wie gezeigt, in den Kommentaren oben

    • Dies ist Reactjs mit es6-Klassen als Komponenten. makeMapEvents = (insertProps) => { wirft einen syntax-Fehler
    InformationsquelleAutor Aditya Singh
  4. 1

    Mischen Sie bis Requisiten und Staat in der Komponente. Sport sollte nur in Requisiten, sollte es nicht im Zustand, wie es weitergegeben wird, in von der übergeordneten Komponente.

    constructor(props) {
  (props);
  this.state = {
    events: [{venue: {lat: 2, lon: 1}}] <== removed sports here, it didn't belong
};

componentWillReceiveProps (nextProps) {
  this.setState({events: [{venue: {lat: 2, lon: 1}}],
                  sports: nextProps.sports});
  console.log(nextProps.sports);
}

static defaultProps = {
  center: {lat: 36.160338, lng: -86.778780},
  zoom: 12,
  sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"],
};

makeMapEvents (insertProps) {
  fetch("./json/meetup.json").then((response) => {
    return response.json()
  }).then((response) => {
    /* eventually returns new events object based on insertProps */
    this.setState({events: response});
  }
};

componentDidMount () {
  this.makeMapEvents(this.props.sports);  <== changed to props.sports
  console.log("mounted", this.props.sports); <== changed to props.sports
}
    InformationsquelleAutor Jeff Siver
Schreibe einen Kommentar