React类组件异步API调用后如何更新组件以刷新按钮文本？

在React类组件里，直接修改类的普通属性不会触发组件重新渲染——React只会监听state的变化来更新UI。你需要把test放到组件的状态（state）中，通过setState方法更新它，这样React才会感知到变化并重新渲染按钮文本。

修改后的完整代码 #

import React, { Component } from 'react';

class Test extends Component {
  constructor(props: any) {
    super(props);
    // 初始化组件状态
    this.state = {
      test: null as boolean | null
    };
    this.fetchCurrentChargingStatus();
  }

  async fetchCurrentChargingStatus() {
    try {
      const result = await fetch("some url");
      const text = await result.text();
      // 使用setState更新状态，触发组件重渲染
      this.setState({
        test: text === "true"
      });
    } catch (error) {
      // 处理请求异常，避免状态一直停留在null
      console.error("请求充电状态失败:", error);
      this.setState({ test: false });
    }
  }

  render() {
    const { test } = this.state;
    return (
      <div>
        <button>{test == null ? "null" : test ? "True" : "False"}</button>
      </div>
    );
  }
}

export default Test;

核心改动说明 #

• 把test从普通类属性迁移到组件的state中，这是React类组件管理可变状态的标准方式。
• 用this.setState()替换直接赋值this.test = ...，这个方法会通知React状态已更新，触发组件重新渲染。
• 增加了try/catch捕获API请求的错误，避免请求失败时按钮文本一直显示"null"。

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