组件this.props在控制台中记录未定义，但在React Developer Tools中显示

Question

私人路线定义：

PrivateRoute = ({ component: Component, ...rest }) => (
                <Route {...rest} render={props => (
                    this.state.isAuthenticated
                    ? <Component {...props} />
                    : <Redirect to="/" />
                )}/> 
            )

将路由器中的道具传递给Home：

<this.PrivateRoute path="/home" exact component={Home} portalId={this.state.portalId} />

React开发人员工具显示：

控制台日志：

我的props.portalId在哪里？我在另一个组件中获取后设置this.props.portalId所以这可能是因为异步调用的问题？在这种情况下我该如何解决这个问题？

编辑：在Home's componentDidMount()中调用Console.log：

class Home extends Component {     
  componentDidMount() {
     console.log(this.props.portalId);
}

Answer 1

要查看道具，您应该将道具传递给由<Route />呈现的组件，而不是将道具传递给<Route />。

您可以使用渲染属性而不是像这样的组件：

<Route to="/anywhere" render={() => <YourComponent {...yourProps} />} />

我使用component道具：

<Route to="/anywhere" component={() => <YourComponent {...yourProps} />} />

虽然有效，但建议使用render。

有时会在github上讨论，你可以看到。

编辑到工作示例：

PrivateRoute = ({ component: Component, ...rest }) => (
            <Route render={props => (
                this.state.isAuthenticated
                ? <Component {...props} {...rest}  />
                : <Redirect to="/" />
            )}/> 
        )

我在我的环境中模仿你的例子，我把rest对象放在<Component />定义中，它对我有用，试试看看会发生什么。

当我这样做时，它会起作用：

PrivateRoute = ({ component: Component, ...rest }) => (
                <Route {...rest} render={() => (
                    this.state.isAuthenticated
                    ? <Component {...this.props}/>
                    : <Redirect to="/" />
                )}/> 
            )

<this.PrivateRoute path="/home" exact component={() => <Home portalId={this.state.portalId} />} />