Question

为什么this.test未定义？我登录this，它确实具有测试属性和值。我很困惑。

class Todo extends Component {
  componentDidMount() {
    this.test = 123;
  }

  render() {
    console.log(this); //is has test as object
    console.log(this.test);
    return <div>{this.test}</div>;
  }
}

https://codesandbox.io/s/8k7m05o5pl

Answer 1

您应该阅读React组件生命周期here。

componentDidMount()在呈现组件之后被调用，因此在render()函数内部将是undefined。尝试在constructor()函数中进行分配，或在this.setState()内部调用componentDidMount()，这将再次调用render()函数。

Answer 2

componentDidMount在第一个渲染之后运行，并且this.test在运行之前不会被设置，因此，第一个渲染将是undefined。

this在控制台中具有test的原因是因为您正在记录一个对象，当在代码中对其进行更新时，该对象将在控制台中进行更新。

class Todo extends React.Component {
  componentDidMount() {
    this.test = 123;
    this.forceUpdate();
  }

  render() {
    console.log(this.test);
    return <div>{this.test}</div>;
  }
}

ReactDOM.render(<Todo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 3

您正在设置this.test 之后。

不要在组件上存储任意值以进行渲染。改为使用状态。

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Todo extends Component {
  componentDidMount() {
    this.setState({ test: 123 });
  }

  render() {
    console.log(this); //is has test as object
    console.log(this.state && this.state.test);
    return <div>{this.state && this.state.test}</div>;
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));

Answer 4

也许是这样吗？

export default class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
       test: ''
    }
  componentDidMount() {
    this.setState({test: 123});
  }

  render() {
    console.log(this.state); //is has test as object
    console.log(this.state.test);
    return (
       <div>{this.state.test}</div>
    );
  }
}

反应`this.property`在render中未定义？

4 个答案: