ReactJs 计算 Table 列中所有值的总和答案

【问题标题】：ReactJs calculate sum of all values present in Table columnReactJs 计算 Table 列中所有值的总和
【发布时间】：2018-07-12 19:57:12
【问题描述】：

我在 componentDidMount() 中调用了来自服务的引导表渲染值。

我的表格示例 -

  Col1      Col2 Col3
   1         2    3
   4         5    6
   7         8    9
  SumValue  15   18 //This last row holds sum of all values

如何计算 col1 中所有值的 SumValue 并显示在 Footer 中。

下面是我如何使用 react-row 将数据映射到行的代码。而 value 是在将其设置为组件状态后，保存从服务返回的 json 文件中存在的所有列的数据的变量。

    {this.state.value && this.state.value.map(function (value, ind) {
                    return <Row key={ind} item={value}></Row>
                })
            }

初始化状态

   constructor(props){
    super(props)
    {
        this.state ={
            value: [],   //Initializing an array
            SumValue: '',
            default: false,               
        }            
    }

设置状态

  fetch('https://www.serviceUrl.com')
   .then(res => res.json())
    .then(value => {
        this.setState({
            value: value.empRecords,  //Here its getting all records from json
            default: false
        });        
    })

如果需要更多信息，请告诉我。

【问题讨论】：

你不能把行保存在一个数组中吗？
@ChrisRosenlind - 我保存在一个数组中，我已经编辑了帖子，包括我如何初始化状态和设置状态

标签： reactjs typescript react-native react-redux

【解决方案1】：

我会使用reduce得到总和：

const SumValue = this.state.value && this.state.value.reduce((a, v) => a + v, 0)

【讨论】：

使用上述语句后，我得到 sumValue - 未定义！ - @米格尔
this.state.value 数组元素架构是什么？我的意思是，它们是对象还是数字，例如：this.state.value = [1, 2, 3] 或 this.state.value = [{ Col1: 1}, { Col1: 2}, { Col1: 3}]？
Json 文件如下 '{"empRecords": [{"value":1},{"value":2},{"value":3}{"value":4} ]}' @米格尔
这应该可以工作：const SumValue = this.state.value && this.state.value.reduce((a, v) => a + v.value, 0)
我会把它放在行动中。

【解决方案2】：

1) initial columnNames and array list

state = {
    callList: [],
    columnModel: [
       { columnName: "date" },
       { columnName: "totalCalls" },
       { columnName: "answeredCalls" },
       { columnName: "abandonedCalls" },
       { columnName: "abandonRate" },
       { columnName: "avgAnswerSpeed" },
    ]

};

2) Get data from api and prepare array data

try {
    const { errors, list, success } = (await apiService.getCalls(request)).data;
    if (success) {

        // first list is normal numbers count only, 
        // if you want count avg sum for some columns send second param array list and include column names
        // now i want count avg for 'abandonRate', 'avgAnswerSpeed' , others just count sum

        this.setState({ 
            callList: list,
            callListSum: this.sumCount(
                list, 
                ['abandonRate', 'avgAnswerSpeed']
            )
        })
    }
} catch (error) {
    console.log(error);
}

sumCount = (list = [], avgColumns = []) => {
    const sum = {};

    // count numbers
    list.map((item) => {
        Object.entries(item).map(([key, val]) => {
            if (typeof (val) === 'number') {
                sum[key] = sum[key] ? (sum[key] + val) : val;
            }
        })
    });
    
    // count avg
    avgColumns.map(key => {
        if (sum[key]) {
            sum[key] = sum[key] / list.length;
        }
    })
    return sum;
}


3) Render data

<table>
    <thead>
        <tr style={{ backgroundColor: "#F5F7FA" }}>
            {
                this.state.columnModel.map((item, i) =>
                  <th key={i}> {item.columnName}</th>
                )
            }
        </tr>
    </thead>
    <tbody>
        {
            this.state.callList.map(
            (info, index) => (
                <tr
                    key={index}
                >
                    {
                        this.state.columnModel.map((item, i) =>
                           (
                            <td key={i}>
                              {info[item.columnName]}
                            </td>
                           )
                        )
                    }
                </tr>
            )
        )}
        {/* Render sum area */}
        <tr 
            style={{ backgroundColor: "#F5F7FA" }}
        >
            {
                this.state.columnModel.map((item, i) =>
                    (
                        <td style={{ fontWeight: "bold" }} >
                         {this.state.callListSum[item.columnName]}
                        </td>
                    )
                )
            }
        </tr>
    </tbody>
</table>

【讨论】：