React表格实现不同行数值相乘并展示结果的技术求助

看起来你已经搭好了表格渲染的基础框架，现在只需要完成Wage/hr和Attendance in the last 7days的相乘计算，把结果填充到Total Wages列就可以了。我来帮你一步步调整代码：

1. 直接在表格渲染时完成乘积计算 #

你当前代码里用了row.totalWages，但从你的Mongoose模型来看，并没有这个字段——这正是问题的核心！我们可以在渲染<td>的时候直接计算两个值的乘积，同时处理可能的空值避免出现NaN：

修改renderTable函数里的表格行部分：

filtered = this.state.data.map( (row, i,) => {
  if(row.department.toLowerCase().indexOf(this.state.departmentFilter) > -1){
    // 计算工资总额，处理可能的未定义数值
    const totalWages = (row.wages || 0) * (row.numberofPresentAttendances || 0);
    return (
      <tr key={"employeeData"+i}>
        <td>{i+1}</td>
        <td>{row.name}</td>
        <td>{row.numberofPresentAttendances}</td>
        <td>{row.department}</td>
        <td>{row.wages}</td>
        {/* 替换成计算后的结果 */}
        <td>{totalWages}</td>
        <td> </td>
      </tr>
    );
  } else {
    return undefined;
  }
});

2. 可选优化：数值格式化 #

如果需要让工资显示更规范（比如保留两位小数），可以用toFixed(2)来处理：

<td>{totalWages.toFixed(2)}</td>

3. 补充：确保出勤数的正确性 #

注意你的Mongoose模型里attendances是Object类型，要确保row.numberofPresentAttendances已经是正确统计出的最近7天出勤数。如果还没完成这个统计逻辑，可以在获取数据后先处理：

// 假设你在拿到原始数据后处理出勤数
const processedData = rawData.map(employee => {
  const sevenDaysAgo = new Date();
  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
  let presentCount = 0;
  
  // 遍历attendances中的日期记录
  for(const dateStr in employee.attendances) {
    const attendanceDate = new Date(dateStr);
    if(attendanceDate >= sevenDaysAgo && employee.attendances[dateStr]) {
      presentCount++;
    }
  }
  
  return {
    ...employee,
    numberofPresentAttendances: presentCount
  };
});
this.setState({ data: processedData });

这样调整后，表格里的Total Wages列就能正确展示相乘后的结果啦！

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