React类组件调用setState时实例变量未渲染的问题

你的代码里出现的问题核心在于JSX的执行时机：

• 实例变量current_count是在组件实例创建时就被赋值的，此时它会直接计算并生成对应JSX，捕获的是初始的this.state.count（值为0）。之后哪怕调用setState更新状态，这个变量也不会重新计算——它只在实例初始化时执行一次。
• 而render方法里的<h1>是在每次组件渲染（状态变化会触发重新渲染）时都会重新生成，所以每次都能拿到最新的this.state.count值，自然会同步更新。

这就是为什么点击按钮4次后，只有render里的h1显示count为4，实例变量对应的h1始终停留在0。

解决方法 #

如果想让这个实例变量的JSX也能响应状态变化，有两种常用方式：

方式1：改成类方法，每次调用返回新JSX

import React, { Component } from "react";

export default class Test extends Component {
  state = {
    count: 0,
  };

  getCurrentCount = () => {
    return <h1>current count is {this.state.count}</h1>;
  };

  render() {
    return (
      <>
        {this.getCurrentCount()}
        <h1>current count is {this.state.count}</h1>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          click me
        </button>
      </>
    );
  }
}

方式2：使用getter属性，每次访问时重新计算

import React, { Component } from "react";

export default class Test extends Component {
  state = {
    count: 0,
  };

  get current_count() {
    return <h1>current count is {this.state.count}</h1>;
  }

  render() {
    return (
      <>
        {this.current_count}
        <h1>current count is {this.state.count}</h1>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          click me
        </button>
      </>
    );
  }
}

这两种方式都能保证每次组件渲染时，对应的JSX都会基于最新的state重新生成，从而实现状态同步更新。

内容的提问来源于stack exchange，提问作者cdhit