再レンダリング時にコンポーネントがクラッシュする| React、Redux

Question

コンポーネントを再レンダリングするとき、私の反応、reduxアプリケーションがクラッシュするという奇妙な問題があります。これについて私が話しているコンポーネント、DoorsSettingsContainer。これは持っている、それは自分のパスです：

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

そして、リンクを介してそれに最初の時間をナビゲートするとき：

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

それは正常に動作しますが、私はDoorsSettingsContainer上だと私のページのすべてのクラッシュをリフレッシュしたときに。ここに私のコンポーネントがあります（長さを減らすためにインポートを取り除いたのです）。 、私は私の行動fetchDoorsのために待っています私は非同期を使用していていることに言及しなければならないと思いますので、定期的ではない約束 ：

// 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 
) 

そして、ここでは私のエラーメッセージです。私はまたこの記事を読んだ：Why is componentDidMount not being called when I re-render?しかし運がない。

読んでいただきありがとうございます。うまくいけば、これを一緒に並べ替えることができます。

Answer 1

あなたが最初にあなたのオブジェクトに 「reduxStore.fetchDoors.doors」

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

次のステップは、あなたのオブジェクトは、「reduxStore.fetchDoors」である理由を見つけることですがnullcheckを行うことにより、クラッシュを解決する必要があります。空の。 もし私があなたなら、私はまずリデューサーに行き、あなたの店舗状態がどこかで上書きされたらトラブルシューティングを行います。