反应 this.props 未定义

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

这就是我在控制台中得到的。

我敢肯定这又是最愚蠢的事情了，但我无法挑选出来……

原文由 php_nub_qq 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您缺少以下内容，请尝试替换您的构造函数：

 constructor(props) {
    super(props);

    console.log(this.props)
}

试试看，你应该从 this.props 得到输出。

在挂载之前调用 React 组件的构造函数。在为 React.Component 子类实现构造函数时，您应该在任何其他语句之前调用 super(props)。否则，this.props 将在构造函数中未定义，这可能会导致错误。来源： ReactJS.org 组件文档。

原文由 Bill 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在我的例子中，我忘记 绑定 我正在调用的方法，这就是为什么 props 未定义的原因。

 constructor(props) {
    super(props);

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

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

原文由 alansiqueira27 发布，翻译遵循 CC BY-SA 4.0 许可协议