组件 this.props 在控制台中未定义日志记录，但显示在 React 开发人员工具中

Question

专用路由定义：

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

在路由器中传递 props 到 Home:

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

React 开发者工具显示：

控制台日志：

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

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

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="/" />
            )}/> 
        )

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

当我这样做时有效：

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

组件 this.props 在控制台中未定义日志记录，但显示在 React 开发人员工具中

Component this.props logging undefined in console, but shows up in React Developer Tools

javascript

reactjs

react-router

react-router-v4

react-props

编辑工作示例：