React组件挂载时展示Promise结果的问题排查与实现方案

调整后的代码无法正常展示版本号、回调内日志不输出，核心是两个问题：

• 你在Promise的then回调里用了普通function() {}写法，没有绑定组件实例的this指向。严格模式下回调执行时this值为undefined，代码执行到if (this.mounted)时会直接抛出Cannot read properties of undefined的类型错误，Promise直接进入rejected状态，后续的日志、setState逻辑都不会执行，加上你没有写catch捕获异常，就表现为回调完全没触发。
• 最初在constructor里发起请求触发的"Can't perform a React state update on an unmounted component"警告，本质是异步请求返回时组件已经被卸载，此时调用setState属于无效操作，存在内存泄漏风险。

把Promise回调改成箭头函数（自动绑定组件实例的this指向），同时补上异常捕获逻辑，代码即可正常运行：

constructor(props) {
  super(props);
  this.state = {
    version: -1
  }
  this.mounted = false;
}

componentDidMount() {
  this.mounted = true;

  fetchModel('http://localhost:3000/test/info')
    // 箭头函数自动绑定当前组件实例的this
    .then((result) => {
      if (this.mounted) {
        this.setState({version: result.__v})
      }
    })
    // 必须加异常捕获，避免请求失败时抛出未捕获的Promise错误
    .catch(err => {
      if (this.mounted) {
        console.error('获取版本信息失败', err)
      }
    })
}

componentWillUnmount() {
  this.mounted = false;
}

• 所有副作用逻辑（异步请求、事件订阅、定时器等）不要放在constructor中执行，类组件统一放到componentDidMount生命周期，函数组件统一放到useEffect回调中，这是React官方推荐的副作用执行时机，能规避绝大多数渲染时序问题。
• 类组件中需要访问组件实例的异步回调，优先使用箭头函数，避免手动绑定this带来的冗余代码和指向错误。
• 优先使用AbortController在组件卸载时中断未完成的异步请求，从根源上避免卸载后回调执行的问题，比手动维护mounted标记更合理。React 18+ 版本原生支持该能力，示例代码如下：

componentDidMount() {
  // 创建中断控制器实例
  this.controller = new AbortController();
  
  // 将signal传入请求方法，原生fetch默认支持该参数，若使用自定义封装的fetchModel需要补全相关逻辑
  fetchModel('http://localhost:3000/test/info', { signal: this.controller.signal })
    .then((result) => {
      this.setState({version: result.__v})
    })
    .catch(err => {
      // 主动中断请求触发的错误不需要额外处理
      if (err.name !== 'AbortError') {
        console.error('获取版本信息失败', err)
      }
    })
}

componentWillUnmount() {
  // 组件卸载时中断所有未完成的请求
  this.controller.abort();
}

• 手动维护mounted标记仅作为兜底方案，仅当你使用的异步逻辑完全不支持中断时才使用，优先选择中断异步任务的方案，减少无效的回调执行和资源浪费。
• 所有异步逻辑必须添加catch/try catch 错误捕获，避免请求失败时抛出未捕获异常导致页面崩溃。
• 函数组件场景下直接在useEffect中返回清理函数处理请求中断即可，不需要额外维护挂载状态标记：

// 函数组件示例
import { useEffect, useState } from 'react';

function VersionDisplay() {
  const [version, setVersion] = useState(-1);

  useEffect(() => {
    const controller = new AbortController();
    const fetchData = async () => {
      try {
        const result = await fetchModel('http://localhost:3000/test/info', { signal: controller.signal })
        setVersion(result.__v)
      } catch(err) {
        if (err.name !== 'AbortError') {
          console.error('获取版本信息失败', err)
        }
      }
    }
    fetchData();
    // 组件卸载时执行中断逻辑
    return () => controller.abort();
  }, [])

  return <div>当前版本：{version}</div>
}

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