时间戳

首页 > 解决方案 > 在 React 中计算两个累积值的分数的优雅方法

reactjs - 在 React 中计算两个累积值的分数的优雅方法

问题描述

我对 React 还不是很流利，我应该扩展现有的代码。在一个render()函数中，我发现了以下内容：

const myStyle = { float: "right", color: "red"} as React.CSSProperties;

<myComponent myProperty={
   () => {
            return <div style={myStyle}>
               {(((this.props.myData)) ? "Total var1: ".concat(
                   this.props.myData.reduce(function (prev, cur) { 
                      return prev + cur.VarOne;}).toString(), 
                   " Total var2: ",
                   this.props.myData.reduce(function (prev, cur) {
                     return prev + cur.VarTwo;}).toString(),
                   " var1/var2: TBD"
                  ) : null )}  </div>
          }
    }
/>

所有这些都没有问题。但是，我现在想计算分数var1/ var2，并输出它。我该如何做到这一点，而无需再次扫描.reduce()所有记录？

任何帮助表示赞赏！我什至不知道该搜索什么，这就是为什么我要打扰你们所有人。

背景资料

myData似乎是自定义记录的（嵌套）列表：

export interface DataViewTableProps {
    selectedDate: any,
    myData: Interfaces.myDataEntry[],
}

export interface myDataEntry{
    PositionId: number,
    PositionName: string,
    Value: number,
    children: myDataEntry[],
}

标签： reactjs

解决方案

由于您要对同一个数组进行两次迭代，因此您可以使用 forEach 一次完成所有计算：

const myData = this.props.myData;
let first = 0;
let second = 0;
myData.forEach(entry => {
   first += entry.VarOne;
   second += entry.VarTwo;
});

const tbd = first / second;

让你的 React 代码更简洁的方法是提取函数return区域之外的所有计算。render

所以不要这样做：

render() {
    return (
        <div>{ // compute the output here} 
        </div>
    )
}

最好这样做：

render() {
    const myOutput = //  compute the output here  
    return (
        <div>{myOutput} </div>
    )
}

推荐阅读