Javascript 需要逻辑或设计模式帮助-反应

这是我正在做的一个react项目。 我需要帮忙拿桌子。 我有一个员工表，其中每一行有不同的员工，我输入每个员工的天数，其他值根据天数计算。那么，让我们假设pf，esi，应付金额是基于此计算的

现在，有一种方法可以进行这些计算。 对于每一行，我们可以设置不同的变量 就像第1排一样，员工1，我们可以 days1和pf1、esi1、amtPayable1将得到相应的计算 然后我可以对第二排做同样的事情。 因此，这将是第2天，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,     
          }
          ];

所以，你看，这里有很多重复，我想要一种避免这种情况的方法

@拉斐尔，这不是阿贾克斯的电话。 一切都是根据天数来计算的。

---

因此，有人，比如雇主，输入每个员工在场的天数，并根据该输入计算其他值，然后将数据提供给另一个表。

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

班级人员{
构造函数（属性）{
分配（此，属性）；
}
获取pf（）{
返回此日期。天*12/100；
}
获取esi（）{
返回此值。pf*0.25；
}
获取amtPayable（）{
返回this.pf+this.esi+100；
}
}
让MyRow=（道具）=>(
{props.item.name}
{props.item.days}
{props.item.pf}
{props.item.esi}
{props.item.amtPayable}
);
让MyTable=（道具）=>(
名称
天
pf
esi
amtPayable
{props.data.map（item=>）}
);
常数数据=[
新人({
键：“1”，
姓名：“杰瑞·戈尔德”，
天数：101
}),
新人({
键：“2”，
姓名：“阿诺德·史密斯”，
天数：102
}),
新人({
键：“3”，
姓名：'贝克'，
天数：103
})
];
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
表格{
边界塌陷：塌陷；
}
表，th，td{
边框：1px纯黑；
填充物：5px；
}
以下是我将如何着手的基本知识。使用具有属性的类，而不是原始数据对象。为人员的计算字段创建属性。将对象传递给React组件，这些组件知道如何很好地显示人员的字段。例如，表组件可以为每个人创建一行


班级人员{
构造函数（属性）{
分配（此，属性）；
}
获取pf（）{
返回此日期。天*12/100；
}
获取esi（）{
返回此值。pf*0.25；
}
获取amtPayable（）{
返回this.pf+this.esi+100；
}
}
让MyRow=（道具）=>(
{props.item.name}
{props.item.days}
{props.item.pf}
{props.item.esi}
{props.item.amtPayable}
);
让MyTable=（道具）=>(
名称
天
pf
esi
amtPayable
{props.data.map（item=>）}
);
常数数据=[
新人({
键：“1”，
姓名：“杰瑞·戈尔德”，
天数：101
}),
新人({
键：“2”，
姓名：“阿诺德·史密斯”，
天数：102
}),
新人({
键：“3”，
姓名：'贝克'，
天数：103
})
];
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
表格{
边界塌陷：塌陷；
}
表，th，td{
边框：1px纯黑；
填充物：5px；
}
这个问题相当广泛，但经过聊天讨论后，你似乎不确定如何使用最终将从数据库中检索的硬编码员工姓名来减少重复

下面是一个使用员工数组的示例，该数组填充一个表，并根据每个员工天数的变化更新pf、esi和应付金额：


let employees=['Jerry gold'，'Arnold Smith'，'Baker']；
让tbody=document.getElementById（'list'）；
让tbodyHTML=''；
forEach（insertRow）；
tbody.innerHTML=tbodyHTML；
函数插入行（employeeName）{
tbodyHTML+=`
${employeeName}
--
--
--
`;
}
函数updateEmployeeData（aNumberInput）{
let days=parseInt（aNumberInput.value）；
设tr=aNumberInput.parentNode.parentNode；
设pf=天*12/100；
设esi=pf*0.25；
应付租金=pf+esi+100；
常数百分之二处=2；
let payment_td=tr.querySelector（“.payment”）；
tr.querySelector（'.pf'）.innerHTML=pf.toFixed（百分之一位）；
tr.querySelector（'.esi'）.innerHTML=esi.toFixed（百分之一位）；
应付(td.innerHTML="元"+应付(百分之一百位);；
如果（应付100.15和应付<100.50）{
应付账款_td.dataset.range='med'；
}否则，如果（应付金额>100.50）{
应付账款_td.dataset.range=‘高’；