React类组件问题：checkPing类方法并非总能被执行？

问题根源 #

你的代码里checkPing仅有时被调用，核心原因是React的setState是异步操作，且本身不返回Promise：

• 你在.then回调里使用await component.setState(...)是无效的，因为setState不会返回Promise，无法通过await等待状态更新完成。
• 当后续执行for循环时，component.state.applications可能还是初始的空数组（或未完成更新的旧状态），导致循环次数为0，checkPing自然不会被调用。

修复方案 #

方案1：直接使用接口返回的数据（推荐） #

无需等待setState完成，先利用接口返回的原始数据执行checkPing，再更新状态：

async getApplications() {
  try {
    const response = await axios.get(process.env.REACT_APP_API_URL + '/applications');
    const apps = response.data;
    
    // 先为每个应用执行ping操作
    for (const app of apps) {
      await this.checkPing(app.id);
    }
    
    // 所有ping完成后再更新组件状态
    this.setState({ applications: apps });
  } catch (error) {
    console.log(error);
  }
}

方案2：利用setState的回调函数 #

如果必须先更新状态再执行ping，可以使用setState的第二个参数（回调函数），它会在状态更新完成后触发：

async getApplications() {
  try {
    const response = await axios.get(process.env.REACT_APP_API_URL + '/applications');
    
    this.setState({ applications: response.data }, async () => {
      // 回调内状态已完成更新，可安全遍历
      for (const app of this.state.applications) {
        await this.checkPing(app.id);
      }
    });
  } catch (error) {
    console.log(error);
  }
}

额外优化建议 #

• 避免使用var component = this，改用箭头函数回调，直接保留this指向：

  // 原代码的.then回调可以改成箭头函数
  .then(async (response) => {
    // 这里this直接指向组件实例，无需额外赋值
  })
  

• 遍历数组时使用for...of语法，比传统for循环更简洁易读。

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