在React JS中计算poDetailsList的subTotal总和并赋值给netTotal的方法

首先核心计算逻辑用数组reduce方法累加所有subTotal值，再遵循React状态不可变原则更新netTotal字段即可，具体实现如下： #

1 核心计算代码 #

单独计算总和的逻辑非常简单，只需要一行代码：

// 累加所有subTotal，初始值设为0避免空数组报错
const sumTotal = data.poDetailsList.reduce((preSum, item) => preSum + item.subTotal, 0)

2 函数组件（useState）完整实现 #

如果你用函数组件搭配useState管理状态，参考代码如下：

import { useState } from 'react'

function YourComponent() {
  // 初始化你的数据状态
  const [data, setData] = useState({
    goodReceiveNote: { id: 1, netTotal: null },
    poDetailsList: [
      { id: 1, subTotal: 300 },
      { id: 1, subTotal: 200 }
    ]
  })

  const updateNetTotal = () => {
    const sumTotal = data.poDetailsList.reduce((preSum, item) => preSum + item.subTotal, 0)
    // 不可变更新状态，不要直接修改原data对象
    setData(prevState => ({
      ...prevState,
      goodReceiveNote: {
        ...prevState.goodReceiveNote,
        netTotal: sumTotal
      }
    }))
  }

  return (
    <div>
      <button onClick={updateNetTotal}>计算净总额</button>
      <p>当前净总额：{data.goodReceiveNote.netTotal ?? '未计算'}</p>
    </div>
  )
}

3 类组件完整实现 #

如果是类组件，参考代码如下：

import React, { Component } from 'react'

class YourComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      goodReceiveNote: { id: 1, netTotal: null },
      poDetailsList: [
        { id: 1, subTotal: 300 },
        { id: 1, subTotal: 200 }
      ]
    }
  }

  updateNetTotal = () => {
    const sumTotal = this.state.poDetailsList.reduce((preSum, item) => preSum + item.subTotal, 0)
    this.setState(prevState => ({
      ...prevState,
      goodReceiveNote: {
        ...prevState.goodReceiveNote,
        netTotal: sumTotal
      }
    }))
  }

  render() {
    return (
      <div>
        <button onClick={this.updateNetTotal}>计算净总额</button>
        <p>当前净总额：{this.state.goodReceiveNote.netTotal ?? '未计算'}</p>
      </div>
    )
  }
}

注意事项 #

• 禁止直接修改原状态对象，例如data.goodReceiveNote.netTotal = sumTotal这种写法不会触发React重渲染，属于错误写法
• 如果你的subTotal字段可能是字符串类型的数字，需要先转成数值再累加：preSum + Number(item.subTotal)
• reduce的初始值必须设为0，否则数组为空时会返回undefined，赋值后可能引发报错

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