javascript - 需要逻辑或设计模式帮助 - react

Question

这是我正在开发的一个 React 项目。需要 table 方面的帮助。我有一个员工表，其中每一行都有不同的员工，我输入每个员工的天数，其他值根据天数计算。因此，假设 pf、esi，应付金额是根据此计算的。

现在，有一种方法可以进行这些计算。对于每一行我们可以设置不同的变量就像 row1、employee1 一样，我们可以这样做days1 和 pf1、esi1、amtPayable1 将相应计算然后我可以对 row2 做同样的事情。因此，这将是 days2，并且 pf2、esi2、amtPayable2 将相应计算。但我认为这不是最好的方法。如果有 100 行怎么办？我会创建这些变量 100 次吗？并且代码将不再是动态的。

那么，最好的方法是什么？

我还没有编写完整的代码，因为我本来打算这样写，但看到了这种方法的问题，因此我询问正确和更好的方法来做到这一点。

但是，人们仍然希望看到一些相关代码以更好地理解我的意思，所以这里是相关代码此代码适用于 3 行，即 3 名员工，这意味着如果有 100 名员工，我可能必须创建 days100、pf100、esi100、amtPayable100。

这让我认为这不是最好的方法，因此我认为必须有更好的方法。

无论如何，这是代码

let days1 = e.target.value;
let pf1 = days1*(12/100);
let esi1 = pf1*0.25;
let amtPayable1 = pf1 + es1 + 100;

let days2 = e.target.value;
let pf2 = days2*(12/100);
let esi2 = pf2*0.25;
let amtPayable2 = pf2 + es2 + 100;

let days3 = e.target.value;
let pf3 = days3*(12/100);
let esi3 = pf3*0.25;
let amtPayable3 = pf3 + es3 + 100;

获得上述所有变量的值后，我将使用它作为不同表的数据。像这样的东西:

 const data = [{
            key: '1',
            name: 'Jerry gold',
            days: days1,            
            amtpayable:amtPayable1,           
            pf:pf1,
            esi:esi1,         

          }, {
            key: '2',
            name: 'Arnold Smith',
            days: days2,            
            amtpayable:amtPayable2,           
            pf:pf2,
            esi:esi2,         

          },
          {
            key: '3',
            name: 'Baker',
             days: days3,            
            amtpayable:amtPayable3,           
            pf:pf3,
            esi:esi3,     
          }
          ];

所以，你看到这里发生了很多重复，我想要一种方法来避免这种情况。

@Rafael，这不是 ajax 调用。一切都是根据天数计算的。因此，某人(例如雇主)输入每个员工在场的天数，然后根据该输入计算其他值，并将数据提供到不同的表中。

Answer 1

这是我将如何进行的基本知识。使用具有属性的类而不是原始数据对象。为人员的计算字段创建属性。将对象传递给知道如何很好地显示 Person 字段的 React 组件。例如，Table 组件可以为每个人创建一个 Row。

class Person {
  constructor(properties) {
    Object.assign(this, properties);
  }
  
  get pf() {
    return this.days * 12 / 100;
  }
  
  get esi() {
    return this.pf * 0.25;
  }
  
  get amtPayable() {
    return this.pf + this.esi + 100;
  }
}

let MyRow = (props) => (
  <tr>
    <td>{props.item.name}</td>
    <td>{props.item.days}</td>
    <td>{props.item.pf}</td>
    <td>{props.item.esi}</td>
    <td>{props.item.amtPayable}</td>
  </tr>
);

let MyTable = (props) => (
  <table>
    <tr>
      <th>Name</th>
      <th>Days</th>
      <th>pf</th>
      <th>esi</th>
      <th>amtPayable</th>
    </tr>
    {props.data.map(item => <MyRow item={item} />)}
  </table>
);

const data = [
  new Person({
    key: '1',
    name: 'Jerry gold',
    days: 101
  }),
  new Person({
    key: '2',
    name: 'Arnold Smith',
    days: 102
  }),
  new Person({
    key: '3',
    name: 'Baker',
    days: 103     
  })
];

// Render it
ReactDOM.render(
  <MyTable data={data} />,
  document.getElementById("react")
);

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>