[英]React app crashes when re-render
我的react,redux應用程序中有多個路由,導航到新路由時一切正常,但是刷新頁面時會崩潰,因為它會嘗試使用尚未獲取的數據:這在我的reducer內部)
export const getDoorById = (reduxStore, door) => {
console.log(reduxStore.fetchDoors.doors) // Nothing here
return reduxStore.fetchDoors.doors.find(item => item._id == door)
}
因此,我嘗試圍繞所有組件制作一個“ LoadingWrapper”:
export default class LoadingWrapper extends Component {
render() {
if (this.props.isLoading) {
return <CircularProgress />
} else {
return this.props.children
}
}
}
它在實際調度isLoading = true的組件上運行良好,如下所示:
export function fetchEvents(state = initialState, action) {
switch (action.type) {
// CUSTOMERS
case 'FETCH_CUSTOMERS':
return { ...state, isLoading: true }
但是在其他一些減速器上(它們完全相同),它不起作用,並且沒有顯示加載圖標。 所以一切都搞砸了。
我只是想知道如何解決這個煩人的bug,使我無法刷新頁面。
這是我的減速器:
const initialState = {
isLoading: false
}
export function fetchDoors(state = initialState, action) {
switch (action.type) {
case 'FETCH_DOORS':
return { ...state, isLoading: true }
case 'FETCH_DOORS_SUCCESS':
return { ...state, doors: action.payload.setDoors, isLoading: false }
case 'FETCH_CONTROLLERS':
return { ...state, isLoading: true }
case 'FETCH_CONTROLLERS_SUCCESS':
return {
...state,
controllers: action.payload.setControllers,
isLoading: false
}
default:
return state
}
}
// This tries to get the array of 'doors'
export const getDoorById = (reduxStore, door) => {
return reduxStore.fetchDoors.doors.find(item => item._id == door)
}
export const getControllerById = (reduxStore, controllerId) => {
return reduxStore.fetchDoors.controllers.find(
item => item._id == controllerId
)
}
render() {
if(!this.props.children && !isLoading) return null;
if (this.props.isLoading) {
return <CircularProgress />
} else {
return this.props.children
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.