反應路由器和REDX手動URL輸入錯誤

我有一個來自REDX存儲未定義道具的問題。這裏是我的routeHandler文件反應路由器和REDX手動URL輸入錯誤

function organisationsFromStore(store) { 
    const { router, organisations } = store; 
    return { 
    organisations 
    } 
} 

function organisationFromStore(store) { 
    const { router, organisations } = store; 
    const { organisationId } = router.params; 
    return { 
    organisation: organisations.get(parseInt(organisationId)) 
    } 
} 


export const organisationRouteHandler = connect(organisationFromStore)(Organisation); 
export const accountsConfigurationRouteHandler = connect(organisationsFromStore)(AccountsConfiguration);

這鉤住我的getRoutes.jsx文件，該文件處理路線：

<Route path="accounts" component={accountsConfigurationRouteHandler}> 
    <Route path=":organisationId" component={organisationRouteHandler}></Route> 
</Route>

在我Organisation.jsx（它得到organisations道具從它的父AccountsConfiguration）成分，我有：

render() { 
    return (
     <div style={{display: "inline"}}> 
     <div className={styles.desks}> 
      <span className={deskStyles.desksLabel}>Desks</span> 
      <ul className={deskStyles.desksList}> 
      { 
       this.props.organisation.get("desks").map(desk => { 
       return <li>{desk.get("name")}</li>; 
       }) 
      } 
      </ul> 
     </div> 
     <div className={this.state.childrenStyle}> 
      {this.props.children} 
     </div> 
     </div> 
    );

當我可以手動輸入我的網址e.g localhost:1234/accounts/4（4是organisationId），我得到錯誤說this.props.organisations is not defined，這打破了應用程序。這是因爲第一路線的處理程序（organisationsFromStore）沒有存儲organisations，並且它沒有將其作爲支柱傳遞給AccountsConfiguration，然後未通過this.props.children傳遞給Organisations。

什麼是使組件等待所有以前的路線來獲取他們的道具，然後在這種情況下渲染組件Organisation沒有錯誤？或者有沒有更好的方法來做到這一點。希望我清楚，謝謝。

P.S我在v2之前使用舊的redux路由器版本，並且此時它必須是該版本。

來源

2017-07-25 Case09

好吧，昨天我腦子不能正常工作，我剛插入檢查道具是否定義並呈現爲有條件的this.props.organisation ? .... : null

來源

2017-07-26 06:26:53 Case09

反應路由器和REDX手動URL輸入錯誤

回答

相關問題