重新呈現|時組件會崩潰反應，Redux

我有一個奇怪的問題，我的反應，REDX應用程序崩潰時，我重新呈現組件。我正在談論的這個組件，DoorsSettingsContainer。它有它自己的路徑：重新呈現|時組件會崩潰反應，Redux

<AuthRoute 
    exact 
    path="/settings/:itemId" 
    component={DoorsSettingsContainer} 
/>

，並通過鏈接導航到它的第一次的時候：

<Link to={{ pathname: `/settings/${door._id}` }}> 
    <p className="sub-title-text-container">Inställningar</p> 
</Link>

它工作正常，但是當我在DoorsSettingsContainer並刷新我的網頁都崩潰。這是我的組件（我刪除了我的進口以減少長度）。

// NOTE: There's no data here so my app crashes :-(
const getDoorById = (reduxStore, door) => { 
    return reduxStore.fetchDoors.doors.find(item => item._id == door) 
} 

const getControllerById = (reduxStore, controllerId) => { 
    return reduxStore.fetchDoors.controllers.find(
    item => item._id == controllerId 
) 
} 

class DoorSettingsContainer extends Component { 
    componentDidMount() { 
    this.props.fetchDoors() 
    } 

    render() { 
    const door = this.props.doors || [] 
    const controller = this.props.controllers || [] 
    if (this.props.isLoading) return <CircularProgress /> 
    return (
     <div> 
     <DoorSettingsForm 
      onSubmit={this.props.updateSettings} 
      door={door} 
      id={this.props.match.params} 
      controller={controller} 
     /> 
     </div> 
    ) 
    } 
} 

DoorSettingsContainer.propTypes = { 
    doors: PropTypes.object.isRequired, 
    controllers: PropTypes.object.isRequired, 
    fetchDoors: PropTypes.func.isRequired 
} 

const mapStateToProps = (state, ownProps) => { 
    const door = getDoorById(state, ownProps.match.params.itemId) 
    const doorId = ownProps.match.params.itemId 
    const controller = getControllerById(state, door.controller) 

    return { 
    doors: door, 
    controllers: controller, 
    isLoading: state.settings.isLoading 
    } 
} 

const mapDispatchToProps = dispatch => { 
    return { 
    fetchDoors:() => dispatch(fetchDoors()), 
    updateSettings: (id, door, controller) => 
     dispatch(updateSettings(id, door, controller)) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(
    DoorSettingsContainer 
)

這是我的錯誤信息：我想我應該提的是，我使用異步等待着我的行動fetchDoors，所以不正規的承諾。我也讀過這篇文章：Why is componentDidMount not being called when I re-render?，但沒有運氣。

感謝您的閱讀，希望我們可以一起解決這個問題。

來源

2017-09-14 Martin Nordström

您需要調查爲什麼'''reduxStore.fetchDoors.doors'爲'null'。插入'console.log（reduxStore.fetchDoors）;'可能會提供線索。 –

我試過你的類型，我唯一回來的是'isLoading：false'，我猜這是因爲我的'initialState'在我的reducer for'fetchDoors'中。 –

你首先需要在您的對象執行nullcheck 「reduxStore.fetchDoors.doors」

const getDoorById = (reduxStore, door) => { 
return (!!reduxStore && !!reduxStore.fetchDoors) ? reduxStore.fetchDoors.doors.find(item => item._id == door) : null 
}

下一步是找出爲什麼你的對象「reduxStore.fetchDoors」是解決崩潰空。如果我是你，我會先到你的Reducer並排除故障，如果你的商店狀態被覆蓋某處。

來源

2017-09-14 12:29:17

重新呈現|時組件會崩潰反應，Redux

回答

相關問題