Reaksiyon bileşenim neden durum güncellemeleriyle güncellenmiyor?

Question

Bazı harita simgelerinin bir tuşa basıldıktan sonra görünmesi/kaybolması için gerekli olan bir harita uygulamasına sahibim, ancak yeni bir spor mülkünden geçtiğinde bileşeni yeniden oluşturmaya nasıl ayarlayacağımı anlayamıyorum veliler bileşen:

Veli yükleri bileşen:

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

Basit harita bileşeni (basitleştirilmiş):

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

Sonunda devletten olayları eşlemek için buraya biter:

<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

ES6 sınıfları varsayılan this AutoBind olmayan tepki taban elemanı yöntemleri olmayan reaksiyona girmektedir. Bu nedenle, makeMapEvents işlevinizde this için bağlam doğru bağlanmamıştır.

Via ES7 mülkiyet başlatıcısı:

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 yapıcısındaki bağlayıcı:

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

Ardından istediğiniz değişkeni isnt resp kullanmayı deneyin parametresi response almak.

Answer 3

Muhtemel nedeni, makeMapEvents() işlevinizin, this.setState() numaralı telefonu çağırırken doğru bir this sözcük verisi sağlaması ve bunun sonucunda kodunuzun çalışmadığıdır. Bu şekilde bir Ok fonksiyonu (() => {}) sağlamak ve doğru lexically bağlanmış değeri kullanmak makeMapEvents() işlevi tanımı değiştirin:

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

Ayrıca yukarıdaki açıklamalarda görüldüğü gibi sağ ayraç eksik olup, burada kod içinde bir yazım hatası yoktur

Answer 4

Bileşendeki sahne ve durumları karıştırıyorsunuz. Spor sadece sahne içinde olmalı, ebeveyn bileşeninden geçtiği halde olmamalıdır.

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 
}