假設視圖我有兩個屏幕:主屏幕& LocationScreen陣營本機:如何更新依賴於聯播網,響應
步驟:首先我從主屏幕導航(狀態= {位置:「A」})至LocationScreen。在LocationScreen
改變的位置(狀態= {位置:「B」})
它傳遞到主屏幕和改變位置從A到B
現在,主屏幕查看具有依賴於位置的狀態。
所以我的問題是,如何更新主屏幕的視圖內容,因爲內容來自網絡響應後位置更新?
假設視圖我有兩個屏幕:主屏幕& LocationScreen陣營本機:如何更新依賴於聯播網,響應
步驟:首先我從主屏幕導航(狀態= {位置:「A」})至LocationScreen。在LocationScreen
改變的位置(狀態= {位置:「B」})
它傳遞到主屏幕和改變位置從A到B
現在,主屏幕查看具有依賴於位置的狀態。
所以我的問題是,如何更新主屏幕的視圖內容,因爲內容來自網絡響應後位置更新?
你所遭受的是React中狀態管理的一個常見問題。爲了減輕麻煩,還有另一個名爲Redux的庫。給它一個閱讀。
要回答你的問題,Redux提供了一個連接函數,它有兩個參數:1)mapStateToProps & 2)mapDispatchToProps。您可以使用這兩個函數和名爲「componentWillReceiveProps(nextProps)」的生命週期方法輕鬆解決您的問題。
這裏是你可以參考的例子:https://stackoverflow.com/a/38203735/2164029
終極版是應用狀態管理一個偉大的工具,特別是對於那些在在應用一些地方共享的狀態。
儘管如此,我認爲正常的React狀態應該足夠了。
將屏幕上的Location
屏幕更改爲Home
屏幕後,Home
屏幕可以觸發數據抓取。通過將內容存儲在組件狀態中,您可以輕鬆地在渲染功能中引用它們。 this.setState
觸發組件的重新呈現,因爲任何state
更改或prop
更改將導致重新呈現
例如,
class HomeScreen extends Component {
...
onLocationChange(newLocation) {
this.setState({ loading: true, newLocation }); // Loading data, and storing new location
fetchDataBasedOnLocation().then((data) => {
this.setState({ content: data. loading: false });
});
}
render() {
return (
...
{Your content in this.state.content}
...
);
}
}
希望這對您有所幫助!
感謝您的回覆,但它如何幫助我更新主屏幕的視圖內容,因爲內容來自網絡響應後位置更新? – subhajit
然後,您可能應該在請求網絡響應時啓動活動指示器,並在您收到響應後立即停止響應。然後你可以使用狀態變量更新視圖。 – atitpatel
Redux是一個很好的閱讀。當狀態發生變化時,是否會自動重新更新(更新意味着重新加載完整組件)組件? – subhajit