Почему this.test не определен? Я регистрирую this, у него есть тестовое свойство и значение. Я запутался.
class Todo extends Component {
componentDidMount() {
this.test = 123;
}
render() {
console.info(this); //is has test as object
console.info(this.test);
return <div>{this.test}</div>;
}
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


componentDidMount запускается после первого рендера, а this.test не будет установлен до тех пор, пока он не будет запущен, поэтому для первого рендера будет undefined.
Причина, по которой this имеет test в консоли, заключается в том, что вы регистрируете объект, который будет обновляться в консоли при обновлении в вашем коде.
class Todo extends React.Component {
componentDidMount() {
this.test = 123;
this.forceUpdate();
}
render() {
console.info(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>Вы устанавливаете this.testпосле элемент отображается.
Не храните произвольные значения компонентов для рендеринга. Вместо этого используйте состояние, для этого он и предназначен.
import ReactDOM from "react-dom";
import React, { Component } from "react";
class Todo extends Component {
componentDidMount() {
this.setState({ test: 123 });
}
render() {
console.info(this); //is has test as object
console.info(this.state && this.state.test);
return <div>{this.state && this.state.test}</div>;
}
}
ReactDOM.render(<Todo />, document.getElementById("root"));
Вы должны прочитать Жизненный цикл компонента React здесь.
componentDidMount() вызывается после рендеринга компонента, поэтому внутри функции render() это будет undefined. Попробуйте выполнить присваивание в функции constructor() или вызвать this.setState() внутри componentDidMount(), что снова вызовет функцию render().
Может быть, что-то вроде этого?
export default class Todo extends Component {
constructor(props) {
super(props);
this.state = {
test: ''
}
componentDidMount() {
this.setState({test: 123});
}
render() {
console.info(this.state); //is has test as object
console.info(this.state.test);
return (
<div>{this.state.test}</div>
);
}
}
componentDidMountвызывается после компонент монтируется, т.е. после первогоrenderвызова. Вот почемуthis.testне определено (пока).