Warum wird meine reagierende Komponente nicht mit Statusaktualisierungen aktualisiert?

Question

Ich habe eine Karten-App, die ich gebaut habe, die einige Kartensymbole benötigt, um nach einem Knopfdruck zu erscheinen/verschwinden, aber ich kann nicht herausfinden, wie man es einstellt, wenn ich eine neue Sport-Eigenschaft von ihm gebe Eltern-Komponente:

Mutter Lasten Komponente:

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

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

Schließlich hier endet Ereignisse vom Staat zur Karte:

<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> 

Answer 1

Reagieren ES6 Klassen nicht this zu standardmäßig tun AutoBind nicht reagieren Basiselement Methoden. Daher ist der Kontext für this in Ihrer Funktion makeMapEvents nicht ordnungsgemäß gebunden. Es gibt zwei Möglichkeiten, dieses Problem zu beheben:

Via ES7 Eigenschaft initializer:

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

Via Bindung in 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 


} 

Answer 2

.then((response) => { 
    this.setState({events: resp}); 
} 

Sie nehmen in Parameter response dann versuchen resp zu verwenden, die die Variable ist, das Sie wollen.

Answer 3

Die wahrscheinliche Ursache ist, dass Ihre makeMapEvents() Funktion nicht den richtigen lexikalischen Wert von this gibt, wenn this.setState() Aufruf und als Ergebnis des Code funktioniert nicht. Ändern Sie die makeMapEvents() Funktionsdefinition Pfeil Funktion (() => {}) und liefern korrekten lexikalisch gebunden Wert dieser zu verwenden:

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

Auch gibt es einen Tippfehler in Ihrem Code, wobei die schließende Klammer fehlt, wie oben in den Kommentaren angezeigt

Answer 4

Sie vermischen Requisiten und Zustand in der Komponente. Sport sollte nur in Requisiten sein, er sollte nicht im Zustand sein, wie er von der Elternkomponente weitergegeben wird.

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 
}