javascript - 如何对 react 表中表行末尾的结果求和

Question

[![在此处输入图像描述][1]][1]

我有一个表格，显示员工工资详细信息，其中 API 中的值乘以一些常数值即可得到每个员工的总工资。我想实现以下目标；我想将所有员工的工资总额按原样求和并显示结果。我尝试过使用map方法和reduce，但我想我没有很好地使用它，因为它不起作用

我删除了部分代码以显示操作部分

  renderTable() {

    var totalCount = 0;
    var shownCount = 0;
    var lowerBound = 0;
    var upperBound = 0;
    var filtered = [];

    filtered = this.state.data.map( (row, i,) => {
      const calWage=row.numberofPresentAttendances * row.wages* 8;
   const calWageOvertime = row.numberofPresentAttendances * [row.wages*8]+row.wages*1.5*row.overtime;


      if(row.department.toLowerCase().indexOf(this.state.departmentFilter) > -1){
        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>
            <Link to={"/employee/overtime/"+row._id}>
                <Button className="btn btn-light"><Overtime/></Button>
              </Link>

            </td>
            <td>{row.overtime}</td>
            <td>
              {row.overtime<1?calWage
            : calWageOvertime}

            </td>

          </tr>
        );
      } else {
        return undefined;
      }

````



Any assistance would be appreciated.


  [1]: /image/Tgnj5.jpg

Answer 1

在生成filtered之后和返回之前添加此代码。首先我们需要对所有工资进行求和，然后我们向表中添加一个新行，仅包含总计字段。

const totalWages = this.state.data.map((row) => row.wages).reduce((a, b) => a + b, 0);  
filtered.push(
    <tr className="totalRow">
        <td></td>
        <td></td>
        ... // go to the wage td
        <td>{totalWages}</td>
        ...
    </tr>
);