更改class变量的值不会更新React中绑定到它的HTML标记

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调用后重新呈现数据，您应该使用state。检查状态和生命周期教程。您的代码应该是这样的：

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

React不是这样的。只有当您通过setState更改状态时，它才会触发新的渲染。您的消息属性不是state，您不能通过设置state对其进行更改。

此外，从构造函数触发ajax并不是您在React中的做法。相反，您可以在组件ddMount中执行，并且您可以考虑到ajax调用在渲染中并不总是完整的事实。（如果这是不可接受的，那么您将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>