React同一函数中无法两次更新状态变量控制加载器显隐求助

嘿，我一眼就揪出你代码里的小坑啦——这是React中setState函数式更新的常见误用，直接导致加载状态根本没被正确设置上！

问题根源 #

你在第一个setState里用了函数式更新的写法，但错误地引用了this.state而非函数参数传入的最新状态快照：

this.setState(state => { 
  // ❌ 错误：应该用参数里的state，而不是this.state
  return { ...this.state, loadingPoints: true } 
})

React的函数式setState会把当前最新的状态作为参数传递给你，你必须基于这个参数来生成新状态——this.state可能是过时的，用它会导致状态更新不生效，甚至被后续的异步更新直接覆盖。

另外，你的catch块里的setState写法也可以统一成函数式风格，保持代码一致性和稳妥性。

修正后的完整代码 #

constructor(props) { 
  super(props); 
  this.state = { loadingPoints: false } 
} 

searchWithChosenFilter = (data) => { 
  // ✅ 正确使用函数式更新，基于传入的state快照修改
  this.setState(state => ({ 
    ...state, 
    loadingPoints: true 
  }));

  Service.someService()
    .then(response => { 
      this.setState(state => ({ 
        ...state, 
        loadingPoints: false 
      }));
    }) 
    .catch(error => { 
      // ✅ 统一用函数式更新，避免状态不一致问题
      this.setState(state => ({ 
        ...state, 
        loadingPoints: false 
      }));
    });
}

额外排查提示 #

如果修改后还是看不到加载器，大概率是你的Service.someService()请求太快（比如本地模拟数据），导致加载状态一闪而过。可以临时加个延迟测试：

// 仅测试用，实际项目请删除
new Promise(resolve => setTimeout(resolve, 1000))
  .then(() => Service.someService())
  .then(response => {
    this.setState(state => ({ ...state, loadingPoints: false }));
  })
  .catch(error => {
    this.setState(state => ({ ...state, loadingPoints: false }));
  });

这样调整后，加载器应该就能正常显示啦！

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