如何在React中对外部JSON文件complianceChecks字段的所有数值求和

这个求和逻辑本质是普通的JavaScript数组操作，和React框架本身没有强绑定，你可以先导入JSON文件，再通过两层遍历提取complianceChecks下的所有数值累加即可，具体实现如下：

步骤1：导入JSON文件 #

React项目支持直接导入本地JSON文件，示例如下：

// 假设你的JSON文件命名为properties.json，存放在src目录下
import propertyData from './properties.json'

如果数据是从后端接口请求获取，将导入部分替换为接口返回的数据即可，后续求和逻辑完全通用。

步骤2：编写求和逻辑 #

你可以直接用数组的reduce方法实现简洁的累加：

const getTotalComplianceValue = () => {
  // 遍历所有物业条目
  return propertyData.reduce((total, property) => {
    // 累加单个物业下所有合规检查项的数值
    const propertyTotal = property.complianceChecks.reduce((itemSum, checkItem) => {
      // 取每个检查项对象的唯一属性值进行累加
      return itemSum + Object.values(checkItem)[0]
    }, 0)
    return total + propertyTotal
  }, 0)
}

你提供的示例数据经过该函数计算，最终结果为22251。

步骤3：在React组件中使用 #

你可以直接在组件中调用该函数渲染结果，示例函数组件如下：

import propertyData from './properties.json'

function ComplianceTotal() {
  const totalValue = propertyData.reduce((total, property) => {
    return total + property.complianceChecks.reduce((sum, check) => sum + Object.values(check)[0], 0)
  }, 0)

  return <div>所有合规检查项总和：{totalValue}</div>
}

export default ComplianceTotal

内容的提问来源于stack exchange，提问作者Rafael Cardoso