React+Ant Design点击按钮加载指示器异常问题求助

看起来你遇到的问题根源在于手动操作DOM和React的状态管理机制冲突了。React是通过虚拟DOM来追踪组件状态并更新真实DOM的，你直接用document.getElementById去修改按钮的innerHTML和disabled属性，会让React的虚拟DOM和真实DOM产生不一致，从而触发那个insertBefore的DOM异常，导致页面空白。

咱们完全可以用React的状态来控制所有按钮的行为，不需要手动操作DOM。下面是修正后的代码：

class DashboardPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      loading: false,
      buttonText: "EXTRACT",
      isDisabled: false
    }
  }

  onClickBtn = () => {
    // 先设置加载状态
    this.setState({ loading: true }, () => {
      // 这里可以替换成你实际的异步操作（比如接口请求）
      // 用setTimeout模拟异步耗时
      setTimeout(() => {
        // 异步操作完成后，更新状态：停止加载，修改文字，禁用按钮
        this.setState({
          loading: false,
          buttonText: "EXTRACTED",
          isDisabled: true
        });
      }, 1000);
    });
  }

  render() {
    const { loading, buttonText, isDisabled } = this.state;
    return (
      <Button 
        id="btnTesting" 
        onClick={this.onClickBtn} 
        loading={loading}
        disabled={isDisabled}
      >
        {buttonText}
      </Button>
    )
  }
}

关键改动说明： #

• 把按钮的文字、禁用状态都放进组件的state里，让React统一管理所有状态
• 点击按钮时先开启loading状态，模拟实际项目中的异步操作（比如接口调用）
• 异步操作完成后，再通过更新状态关闭加载、修改按钮文字并禁用按钮
• 完全移除手动操作DOM的代码，所有按钮属性都通过state绑定到组件props上

这样React就能正确追踪所有状态变化，虚拟DOM和真实DOM保持一致，就不会再出现之前的DOM异常了。而且这种写法也更符合React的设计理念，代码逻辑更清晰、易维护。

内容的提问来源于stack exchange，提问作者Alexandria.Omega.Reid