Node与React数据不同步求助：日期切换后后端未重新计算

看起来你遇到的核心问题是异步请求顺序混乱加上后端不可靠的延迟处理，导致新的日期值还没被后端正确读取就开始计算，同时前端Redux状态没有和最新数据同步。咱们一步步拆解解决：

1. 后端：修复异步逻辑的根本问题 #

你的getDetails接口里存在两个致命的异步问题：

• 用setTimeout(1000)来等待axios.get的结果，这种固定延迟完全不可靠——网络快的时候浪费时间，网络慢的时候还没拿到数据就开始计算了。
• axios.get是异步操作，你没有用async/await或者Promise链式调用，而是用立即执行函数+setTimeout，导致代码逻辑完全脱离异步流程的控制。

修复后的后端代码： #

getDetails: async (req, res) => {
  try {
    // 先完成认证
    const auth = await authentication.authenticate();
    const sheets = google.sheets('v4');
    
    // 获取谷歌表格数据
    const response = await sheets.spreadsheets.values.get({
      auth: auth,
      spreadsheetId: config.spreadsheetSettings.spreadsheetId,
      range: config.spreadsheetSettings.employeeSheetId,
    });

    const rows = response.values;
    if (!rows || rows.length === 0) {
      return res.err('No data found.');
    }

    const updatedData = employeeService.mapEmployeeSheetToJson(rows);
    
    // 等待axios.get完成，拿到最新的finalSelect值
    const apiRes = await axios.get(`http://localhost:1337/api/`);
    const kajmak = apiRes.data.slice(-1)[0];
    const xo = kajmak[Object.keys(kajmak)[0]];

    // 开始处理员工数据逻辑（合并冗余循环，修正判断逻辑）
    const result = [];
    const targetDate = parseInt(xo, 10);
    
    updatedData.forEach(emp => {
      const empStart = parseInt(moment(emp.startdate).format('YYYYMM'), 10);
      const empEnd = emp.enddate ? parseInt(moment(emp.enddate).format('YYYYMM'), 10) : Infinity;

      // 符合条件的员工：入职早于目标日期，且离职晚于目标日期（或仍在职）
      if (empStart < targetDate && targetDate < empEnd) {
        result.push(emp);
      }
    });

    // 生成最终结果
    const finalResult = result.map(emp => `${emp.name} ${emp.surname}`);
    res.ok(finalResult);

  } catch (err) {
    res.serverError(err);
  }
}

关键修复点： #

• 用async/await替代回调和setTimeout，让异步操作按顺序执行，彻底解决“还没拿到新值就计算”的问题。
• 合并了三次updatedData.forEach为一次，优化性能，同时修正了原代码中第三个forEach的逻辑错误（原判断条件永远为false，等于无效代码）。
• 用Infinity替代undefined判断在职员工的结束日期，逻辑更清晰。

2. 前端：确保请求顺序正确，同步Redux状态 #

你的前端代码里，先发起axios.post发送新日期，然后立刻调用getEmployee，但post是异步的，可能还没把新日期保存到后端，get请求就已经发起了，导致拿到旧数据。

修复后的前端代码： #

// 改成async函数，确保post完成后再发起get请求
getEmployeeSalaryData = async () => {
  const { year, month } = this.props.history.location.state.item;
  const selectedMonth = moment().month(month).format("MM");
  const finalSelect = parseInt(year + selectedMonth, 10);

  try {
    // 先等待post请求完成，确保后端已经保存了新的日期值
    await axios.post(`http://localhost:1337/api/`, { 'test': finalSelect });
    console.log('New date saved successfully');

    // 清空组件内部旧状态，避免数据残留
    this.setState({
      currentEmployee: {
        fullNames: [],
        salaryInfo: []
      }
    });

    // 先dispatch获取最新的details（假设你有对应的Redux action）
    await this.props.fetchDetails();
    const { details } = this.props;

    // 按顺序处理每个员工的薪资数据
    for (const x of details) {
      const y = await EmployeeApi.getEmployee(x);
      const test = y.data;
      const onlyRelevantDate = test.filter(item => {
        const itemDate = parseInt(item.year + moment().month(item.month).format("MM"), 10);
        return itemDate === finalSelect;
      });

      this.setState(prevState => ({
        currentEmployee: {
          ...prevState.currentEmployee,
          fullNames: [...prevState.currentEmployee.fullNames, x],
          salaryInfo: [...prevState.currentEmployee.salaryInfo, onlyRelevantDate]
        }
      }));
    }
  } catch (err) {
    console.error('Error:', err);
  }
}

// 用componentDidMount替代已废弃的componentWillMount
componentDidMount() {
  this.getEmployeeSalaryData();
}

// 用componentDidUpdate替代已废弃的componentWillReceiveProps
componentDidUpdate(prevProps) {
  // 只有当选中日期变化时，才重新获取数据，避免无限循环
  if (prevProps.history.location.state !== this.props.history.location.state) {
    this.getEmployeeSalaryData();
  }
}

关键修复点： #

• 把getEmployeeSalaryData改成async/await函数，确保post请求完成后再发起get请求，彻底解决请求顺序颠倒的问题。
• 废弃了React已移除的生命周期钩子，改用更安全的componentDidMount和componentDidUpdate，同时增加了props变化判断，避免无限触发请求。
• 用for...of替代map+异步回调，确保状态更新的顺序正确，避免多个异步回调同时更新状态导致的混乱。
• 增加了Redux状态更新逻辑：先dispatch获取最新的details，确保Redux里的数据是后端返回的最新结果，而不是旧缓存。

3. Redux状态同步的额外建议 #

你提到用Redux传递数据，那要确保：

• 每次获取新的员工数据后，dispatch对应的action更新Redux状态，而不是只依赖组件内部状态。
• 避免在Redux里缓存过期数据，可以考虑在发起新请求时先清空对应状态，或者添加时间戳标记数据是否新鲜。
• 组件B应该直接从Redux获取最新状态，而不是依赖组件A传递的旧props——当Redux状态更新时，组件B会自动重新渲染。

最后验证步骤 #

1. 重启后端服务，确保修复后的代码生效。
2. 测试流程：组件A选日期→跳转组件B→等待数据加载→返回组件A选新日期→跳转组件B，确认显示新结果。
3. 如果仍有问题，检查Redux的action和reducer是否正确处理了新数据的更新，有没有遗漏的状态更新逻辑。

内容的提问来源于stack exchange，提问作者D啪enis H.