मेरा प्रतिक्रिया घटक राज्य अपडेट के साथ अपडेट क्यों नहीं कर रहा है?

Question

मेरे पास एक नक्शा ऐप है जिसे मैंने बटन बटन के बाद दिखाई देने/गायब होने के लिए कुछ नक्शा आइकन की आवश्यकता है, लेकिन मैं यह नहीं समझ सकता कि घटक को फिर से प्रस्तुत करने के लिए इसे कैसे सेट किया जाए जब मैं इसे से एक नई स्पोर्ट्स प्रॉपर्टी में पास करता हूं माता-पिता घटक:

जनक भार घटक:

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

सरल मैप घटक (सरलीकृत):

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

आखिरकार यहाँ समाप्त होता है राज्य से घटनाओं को मैप करने के:

<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 वर्गों के लिए डिफ़ॉल्ट रूप से this autobind नहीं है गैर प्रतिक्रिया आधार सदस्य तरीकों। इसलिए, आपके फ़ंक्शन makeMapEvents में this का संदर्भ सही ढंग से बाध्य नहीं है।

वाया ES7 संपत्ति प्रारंभकर्ता:

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

वाया निर्माता में बाध्यकारी:

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

आप पैरामीटर response में ले तो resp जो चर आप चाहते हैं नहीं है इस्तेमाल करने की कोशिश।

Answer 3

संभावित कारण यह है कि makeMapEvents() फ़ंक्शन this का सही शब्दावली मान प्रदान नहीं करता है जब this.setState() पर कॉल किया जाता है और नतीजतन आपका कोड काम नहीं करता है। तीर समारोह (() => {}) और प्रदान सही इस रूप में की lexically बाध्य मान का उपयोग करने makeMapEvents() समारोह परिभाषा बदलें:

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

इसके अलावा अपने कोड लिखने में कोई गलती जिसमें समापन कोष्ठक के रूप में ऊपर टिप्पणी में दिखाया गया है याद आ रही है

Answer 4

आप घटक में प्रोप और राज्य मिश्रण कर रहे हैं। खेल केवल प्रोप में होना चाहिए, यह राज्य में नहीं होना चाहिए क्योंकि यह मूल घटक से पारित किया जा रहा है।

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 
}