Question

我有来自redux商店的未定义道具的问题。这是我的routeHandler文件

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，后者没有将它传递给{{1}通过Organisations。

让组件等待所有以前的路由获取其道具的最佳方法是什么，然后在这种情况下呈现this.props.children组件而不会出错？或者有更好的方法来做到这一点。希望我很清楚，谢谢。

P.S我在v2之前使用旧的redux-router版本，此时它必须是那个版本。

Answer 1

好吧，昨天我的脑子里工作不正常，我只是插入检查是否定义道具并将其呈现为条件this.props.organisation ? .... : null

React-router和redux手动URL输入错误

1 个答案: