React.js表格行自动计算黏度、剪切率及黏度下降值开发问题

实现方案 #

你可以在渲染表格行时直接基于已有的NewRow2数组里的黏度数据计算绝对下降值与下降百分比，无需新增额外状态，修改核心逻辑如下：

核心修改点

在NewRow2.map循环渲染行的逻辑中补充两个字段的计算：

{NewRow2.map((element, rowId) => {
  // 计算绝对下降值：第一行空，其余行=上一行黏度 - 当前行黏度
  let absoluteDrop = '-'
  if (rowId > 0 && !isNaN(NewRow2[rowId-1].Viscosity) && !isNaN(element.Viscosity)) {
    absoluteDrop = Math.round(NewRow2[rowId-1].Viscosity - element.Viscosity)
  }
  // 计算下降百分比：第一行空，其余行=绝对下降值 / 上一行黏度 * 100
  let dropPercent = '-'
  if (rowId > 0 && !isNaN(NewRow2[rowId-1].Viscosity) && NewRow2[rowId-1].Viscosity !== 0 && !isNaN(element.Viscosity)) {
    dropPercent = `${(((NewRow2[rowId-1].Viscosity - element.Viscosity) * 100) / NewRow2[rowId-1].Viscosity).toFixed(2)}%`
  }
  return (
    <tr key={rowId}>
      {/* 原有前5列代码不变，修改后面两列的value属性 */}
      <td> <input type='text' className="form-control" value={absoluteDrop} readOnly /></td>
      <td> <input type='text' className="form-control" value={dropPercent} readOnly /></td>
      {/* 原有操作列代码不变 */}
    </tr>
  )
})}

新增行优化（可选）

你原有逻辑中新增的行存在单独的NewRow数组，无法参与计算，建议修改increaseRow方法，把新增行统一存入NewRow2数组，保持所有行结构一致：

const increaseRow = () => {
  const rowCount = parseInt(row) || 0
  const newRows = Array.from({length: rowCount}, () => ({
    Injection_Speed: "",
    Fill_Time: "",
    Peak_Inj_Press: "",
    Viscosity: "",
    Shear_Rate: "",
  }))
  setNewRow2([...NewRow2, ...newRows])
  // 原NewRow、allRowsAdded相关状态可以直接删除不用
};

修改后可以删掉模板中NewRow.map的渲染逻辑，所有行统一用NewRow2渲染即可。

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