React this.props가 정의되지 않았습니다.

React this.props가 정의되지 않았습니다.

나는 꽤 표준적인 설정을 가지고 있고, 페이지가 있는 라우터를 가지고 있다.

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

콘솔에는 이렇게 표시됩니다.

다시 한 번 가장 멍청한 짓이긴 하지만 그걸 알아낼 수가 없어...

다음 사항이 누락된 것 같습니다. 컨스트럭터를 교체해 보십시오.

constructor(props) {
    super(props);

    console.log(this.props)
}

시험해 보세요.여러분들은 다음에서 출력을 얻을 수 있을 겁니다.this.props.

React 구성 요소의 생성자는 마운트되기 전에 호출됩니다.React 생성자를 구현하는 경우.컴포넌트 서브 클래스, 다른 문보다 먼저 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;
}

내 경우(응답: 17.0.1):

만약 당신의 클래스에 컨스트럭터가 있다면, 당신은 이런 소품을 초기화해야 할 것입니다.

  constructor(props) {
    super(props);
  }

당신의 컨스트럭터에서 아무 일도 일어나지 않는다면 컨스트럭터를 삭제하는 것만으로 충분했고, 이것은 예상대로 실행되었습니다.이 오류가 발생한 것은 이런 컨스트럭터를 가지고 있었기 때문입니다.

  constructor() {
    super();
  }

나는 내 옷을 바꿔 입어야 했다.

import { Output } from './Output';

로.

import Output from './Output';

저는 React와 JS는 대체로 처음이지만, 이것으로 해결되었습니다.

반응.js noob btw;

처음에는 이런 식이었다.

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

에러가 발생하였습니다('defined'는 정의되어 있지 않습니다).

그리고 이렇게 슈퍼에서 (프로포즈)를 삭제해 버렸습니다.

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

모든 게 완벽하게 해결됐어요

언급URL : https://stackoverflow.com/questions/42858542/react-this-props-is-undefined