Question

我有一个非常标准的设置，一个带页面的路由器

import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link, hashHistory as history } from "react-router";

import Layout from "./pages/Layout";
...
import User from "./pages/User";

ReactDOM.render(
    <Router history={history}>
      <Route path="/" component={Layout}>
        <IndexRoute component={...}/>
        <Route path="project/create" component={...}/>
        <Route path="project/:id" component={...}/>
        <Route path="user/:id" component={User}/>
        <Route path="*" component={...}/>
      </Route>
    </Router>,
    document.getElementById("app-root"));

除非我转到像site.tld/#/user/5这样的页面，User组件在正确实例化时遇到了一些问题，否则一切都工作正常。所有其他页面都在工作，我还有另一个页面使用url参数（project/:id），它也正常工作。

import React from "react";
...

export default class User extends React.Component {

  constructor() {
    super();

    console.log(this);

    ...
  }

  render() {
    return ...
  }

这是我在控制台中获得的

我确定它再次成为最糟糕的事情，但我无法挑选出来......

Answer 1

我认为你错过了以下内容，替换你的构造函数

constructor(props) {
    super(props);

    console.log(this.props)
}

尝试一下，你应该从this.props获得输出

在安装React组件之前，会调用它的构造函数。在实现React.Component子类的构造函数时，您应该在任何其他声明之前调用super（props）。除此以外， this.props将在构造函数中未定义，这可能导致错误。

Answer 2

我遇到了同样的问题，我通过修改组件来解决，因为组件需要使用state绑定传递attribute，然后使用props进行访问，

component= { ()=> <AboutUs leaders={this.state.leaders}/> }

完整路线将会

<Route path="/aboutus" component= { ()=> <AboutUs leaders={this.state.leaders}/> } />

如果:id的问题已使用解决，您可以根据自己的user/:id进行更改，
这可以回答您的问题，

<Route path="/menu/:dishId" component= {DishWithId} />

用作，

const DishWithId = ({match}) => {
      return(
          <DishDetail dish={this.state.dishes.filter( (dish) => dish.id === parseInt(match.params.dishId,10))[0]} 
            comments={this.state.comments.filter( (comment) => comment.dishId === parseInt(match.params.dishId,10)) } 
          />
      );
    }

Answer 3

在我的情况下-

from contextlib import ExitStack

stack = ExitStack()
try:
    stack.enter_context(TstContx())
except Exception:  # `__enter__` produced an exception.
    pass
else:
    with stack:
        ...  # Here goes the body of the `with`.

仍然给了constructor(props) { super(props); console.log(this.props); }。

我必须显式使用undefined，它才有效。

this.props = props;

Answer 4

在我的情况下（反应：17.0.1）：

如果您的班级中有构造函数，那么您将必须像这样初始化道具

  constructor(props) {
    super(props);
  }

如果构造函数中什么也没有发生，则只需删除对我有用的构造函数，然后 this.props 会按预期工作。我遇到此错误的情况是具有这样的构造函数

  constructor() {
    super();
  }

Answer 5

我不得不切换我的

import { Output } from './Output';

到

import Output from './Output';

总的来说，我对 React 和 JS 很陌生，但我已经解决了。

Answer 6

React.js 菜鸟顺便说一句；

最初是这样的：

constructor(props) {
    super(props);
...

得到错误（'props' 未定义）

然后我刚刚从 super 中删除了 (props) 像这样

constructor (props) {
    super();
...

这解决了它，一切都完美加载。

Answer 7

就我而言，我忘记绑定我正在调用的方法，这就是未定义 props 的原因。

constructor(props) {
    super(props);

    this.changeScreenToForm = this.changeScreenToForm.bind(this);
}

changeScreenToForm() {
    this.props.app.changeScreen(Form);
}

反应this.props是未定义的

7 个答案: