Reactjs React this.props未定义，尽管在构造函数和super中传递了props

我试图访问

this.props

，但它未定义

constructor(props) {
    super(props);
    console.log(this.props) <-- undefined
    this.state = {
        req: {
            userId: 1,
            skip: 0,
            limit: 10
        },
        posts: []
    }
}

构造函数（道具）{
超级（道具）；
console.log（this.props）

---

我试图通过

this.props.match.params

访问userId。我应该能够控制台this.props，但不知何故它是未定义的。

您的类是否扩展了

React.Component

类

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  } 
}

---

您的类是否扩展了

React.Component

类

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  } 
}

---

在构造函数中，传递给实例的参数是

props

。

您试图访问的.props

是类的props，而不是传递给构造函数的props

如果要显示默认情况下传递给组件的

props

，则应记录

console.log（props）

，因为

此.props

尚未定义

---

如果您想在创建组件后显示您的道具（例如，如果您的组件由于父级异步调用而被多次呈现），您应该将console.log放入构造函数中的

render

方法中，传递给实例的参数是

props

。

您试图访问的.props

是类的props，而不是传递给构造函数的props

如果要显示默认情况下传递给组件的

props

，则应记录

console.log（props）

，因为

此.props

尚未定义

---

如果您想在创建组件后显示道具（例如，如果您的组件由于父级异步调用而被渲染多次），您应该将console.log放入

render

方法中

您的

路径

不正确

<Route path='/posts/:userId' component={() => <Posts />} />

---

更多信息。

您的

路线不正确

<Route path='/posts/:userId' component={() => <Posts />} />

更多信息。
您可以共享父组件的代码吗？请尝试
console.log（props）
取而代之。@Emanuele此代码本身在容器中。因此，此代码的父组件将是App。tsx@SultanH.我也试过了。运气不好。仍然没有定义。Shashwat如果这是容器，为什么你希望在这里收到任何道具？你真的从App.tsx发送道具吗？你能共享父组件的代码吗？试试看<代码>控制台日志（道具）

取而代之。@Emanuele此代码本身在容器中。因此，此代码的父组件将是App。tsx@SultanH.我也试过了。运气不好。仍然没有定义。Shashwat如果这是容器，你为什么希望在这里收到任何道具？你真的从App.tsx发送了道具吗？是的，它在扩展React.Component是的，它是Extentding React.component也尝试了控制台道具，但没有成功。这很正常，它是您的构造函数，依赖于父组件，您可能什么都没有。您的类可以吗？您如何调用您的组件以及在渲染方法中传递给组件的道具

，如果您放置console.log，它是否仍然未定义？

}/>

因此，我试图通过

this.props.match.params访问userId

您无法访问它，这里的情况不同。您应该使用路由器包装组件<代码>从“react router dom/withRouter”导入withRouter，并在组件中导出withRouter类（MyComponent）这样您就可以访问路由器道具。我也尝试过控制台道具，但没有成功。这很正常，它是您的构造函数，取决于父组件，您可能什么都没有。如果您将console.log，它仍然未定义吗？

}/>

因此，我试图通过

this.props.match.params

访问用户ID。您无法访问它，这里有所不同。您应该使用

WithRouter

从“react router dom/WithRouter

导入WithRouter，并在您的组件

导出类WithRouter

中包装您的组件（MyComponent）这样您就可以访问路由器道具。

<Route path='/posts/:userId' component={Posts} />

{props.match.params.userId} //for functional component
{this.props.match.params.userId} //for class based component