簡體   English   中英

重新渲染時,React應用程序崩潰

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM