react this.props 未定义

IT技术 reactjs
2021-05-24 11:36:18

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

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

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

在此处输入图片说明

我敢肯定这是有史以来最愚蠢的事情，但我无法挑选出来......

4个回答

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

constructor(props) {
    super(props);

    console.log(this.props)
}

试试看，你应该从this.props.

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

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

constructor(props) {
    super(props);

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

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

在我的情况下 -

constructor(props) {
   super(props);
   console.log(this.props);
}

还是给了undefined。

我必须this.props = props;明确使用并且它起作用了。

constructor(props) {
    super(props);
    this.props = props;
}

就我而言（react：17.0.1）：

如果你的类中有构造函数，那么你将不得不像这样初始化props

  constructor(props) {
    super(props);
  }

如果您的构造函数中没有发生任何事情，那么只需删除对我有用的构造函数，并且this.props按预期工作。我收到这个错误的情况是有一个像这样的构造函数

  constructor() {
    super();
  }
其它你可能感兴趣的问题
上一篇React setState +“prevState”从何而来？ 下一篇我的打印需要多长时间？