Изменение значения переменной класса не обновляет привязанный к нему HTML-тег в React

Question

Я разработал следующий класс.

export default class DataView extends React.Component {

  private message = "---";
  private url = ...;
  private body = { ... };
  private headers = { ... };

  constructor(props: any) {
    super(props);
    this.message = "executing...";

    ajax.post(this.url, this.body, this.headers)
      .subscribe(
        result => {
          this.message = "code " + result.status;
          console.log(result.status);
        },
        error => {
          this.message = "Problem: " + error.status;
          console.log("Problem: " + error.status)
        });
  }

  render() {
    return (
      <div style={divStyle}>
        Message: {this.message}
      </div>);
  }
}

Ожидалось, что исходная строка будет заменена исходным сообщением (что происходит), а затем результатом вызова (что не происходит).Я новичок в React и не уверен, что здесь не так.Этот подход я использую в Angular, но, конечно, в React все немного по-другому.

Сам вызов успешен, и я вижу правильные результаты в консоли.Это только связь между переменной класса и отображаемым значением, которая устарела.Мне сказали, что рендеринг выполняется автоматически, и я не должен сам вызывать render () .

Answer 1

Вы должны использовать состояние, если вы хотите перерисовать данные после вызова ajax.Проверьте состояние и учебники жизненного цикла.Ваш код должен быть таким:

export default class DataView extends React.Component {

  constructor(props) {
    super(props);
    this.state = {message: 'executing...', body: '', headers: '', 'url': ''}
  }

  componentWillMount() {
      ajax.post(this.state.url, this.state.body, this.state.headers)
          .subscribe(
            result => {
              this.setState({ message: "code " + result.status });
              console.log(result.status);
            },
            error => {
              this.setState({ message: "Problem: " + error.status });
              console.log("Problem: " + error.status)
           });
  }

  render() {
    return (
      <div style={divStyle}>
        Message: {this.state.message}
      </div>);
  }
}

Answer 2

Реакт не работает так.Новый рендеринг запускается только в том случае, если вы измените свое состояние , которое вы делаете с помощью setState.Ваше свойство message не является состоянием, и вы не изменяете его с помощью setState.

Кроме того, запуск ajax из конструктора - это не то, что вы делаете в React.Вместо этого вы должны сделать это в componentDidMount и учесть тот факт, что вызов ajax не всегда будет завершен в render.(Если это неприемлемо, то вы нажимаете ajax-вызов на уровень выше, и родительский элемент отображает этот компонент только при наличии данных.)

Вот пример с минимальными изменениями и setTimeout, заменяющий ajax.;см. *** комментарии:

class DataView extends React.Component {

  /* These would all probably be state properties
  private message = "---";
  private url = ...;
  private body = { ... };
  private headers = { ... };
  */

  constructor(props) {
    super(props);
    this.state = {                                  // *** Put `message`
        message: "executing..."                     // *** on `state`
    };
  }
  
  componentDidMount() {                             // *** Use `componentDidMount`
    /*                                              // *** to start async load
    ajax.post(this.url, this.body, this.headers)
      .subscribe(
        result => {
          this.message = "code " + result.status;
          console.log(result.status);
        },
        error => {
          this.message = "Problem: " + error.status;
          console.log("Problem: " + error.status)
        });
    */
    setTimeout(() => {
        this.setState({                             // *** Update state with
            message: "code GOTSTATE"                // *** `setState`
        });
    }, 800);
  }

  render() {
    return (
      // *** No idea where `divStyle` was meant to come from, left it out below
      // Note using `this.state.message` below
      <div>
        Message: {this.state.message}
      </div>);
  }
}


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

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>