React函数中两次更新数组状态失效问题排查求助

问题原因 #

你当前代码的核心问题是React的状态更新是异步批量执行的：

• 调用setFixedDepositNriRates(testData)后，fixedDepositNriRates不会立刻更新为testData，此时let data = [...fixedDepositNriRates]拿到的还是更新前的旧状态值
• 后续的过滤操作基于旧数据执行，最后第二次setFixedDepositNriRates(data)会直接覆盖第一次的重置请求，导致最终状态不是你期望的过滤结果

解决方案 #

直接以testData作为过滤的原始数据源，跳过中间不必要的状态重置步骤，一次完成最终状态的设置：

const SearchResults = () => {
    // 直接从全局的testData开始处理过滤
    let data = [...testData];
    if (bank) {
      data = data.filter(item => item.Group.indexOf(bank) !== -1)
    }
    if (rate) {
      if (rate === 8) {
        data = data.filter(item => item.interest < rate)
      }
      // 合并rate===9和10的重复逻辑
      if (rate === 9 || rate === 10) {
        data = data.filter(item => item.interest > rate)
      }
    }
    setFixedDepositNriRates(data);
  }

额外优化点 #

• 合并了rate===9和rate===10的相同过滤逻辑，减少代码冗余
• 避免了两次setState的异步冲突问题，逻辑更清晰且性能更优

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