Perché il mio componente di reazione non si aggiorna con gli aggiornamenti di stato?

Question

Ho un'app mappa che ho costruito che richiede che alcune icone delle mappe appaiano/scompaino dopo la pressione di un pulsante, ma non riesco a capire come impostarlo per ri-renderizzare il componente quando passo in una nuova proprietà sportiva da componente genitori:

Parent carichi componente:

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

semplice componente mappa (semplificato):

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

finisce Finalmente qui per mappare gli eventi da stato:

<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

React classi ES6 non AutoBind this per default non reagire metodi elemento di base. Pertanto, il contesto per this nella funzione makeMapEvents non è associato correttamente. Ci sono 2 modi per risolvere questo:

Via ES7 proprietà di inizializzazione:

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 vincolante nel costruttore:

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

si prende in parametro response quindi provare a utilizzare resp che costerà la variabile che si desidera.

Answer 3

La causa probabile è che la funzione makeMapEvents() non fornisce il valore lessicale corretto di quando si chiama this.setState() e di conseguenza il codice non funziona. Modificare la definizione makeMapEvents() funzione da utilizzare Freccia funzione (() => {}) e fornire valore corretto lessicalmente legato a questo come:

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

Inoltre v'è un errore di battitura nel codice in cui la parentesi di chiusura non è presente, come indicato nei commenti sopra

Answer 4

Si sta mescolando puntelli e stato nel componente. gli sport dovrebbero essere solo nei sostegni, non dovrebbero essere nello stato in cui vengono trasferiti dal componente principale.

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 
}