爲什麼我的反應組件不更新狀態更新？

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類不通過默認autobind this非反應基構件的方法。因此，函數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

可能的原因是您撥打this.setState()時makeMapEvents()函數未提供this的正確詞彙值，導致您的代碼無法正常工作。改變makeMapEvents()功能定義中使用Arrow功能（() => {}），並提供正確的詞彙結合的這個作爲值：

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 
}