ReactJS如何从对象数组提取指定值并单独存储及求和问题

问题分析 #

你当前的写法每次serviceItem更新时，都会循环把每个item的amountToPay追加到原数组里，自然会产生重复。而且没必要用循环调用setState，直接一次性生成目标数组即可。

正确实现方式 #

方案1：直接推导（无需额外useState） #

如果只是为了求和，完全不需要把这些值存到独立useState里，直接从serviceItem推导就行，性能更好：

// 直接计算求和，每次render时自动更新
const totalAmount = serviceItem.reduce((sum, item) => {
  // 注意转成数字，避免字符串拼接
  return sum + Number(item.amountToPay || 0);
}, 0);

方案2：维护独立useState（如果确实需要存数组） #

如果一定要把amountToPay数组存到独立状态里，修改useEffect的逻辑，直接生成新数组覆盖，而不是累加：

const [serviceItem, setServiceList] = useState([{serviceValue:"", quantityValue:"",amountToPay:""}]);
const [amountToPay, setAmountToPay] = useState([]);

useEffect(()=>{
  // 直接生成新的amount数组，替换原状态
  const newAmounts = serviceItem.map(item => item.amountToPay);
  setAmountToPay(newAmounts);
}, [serviceItem])

// 求和时转成数字计算
const totalAmount = amountToPay.reduce((sum, amount) => sum + Number(amount || 0), 0);

原写法重复的原因 #

原代码里serviceItem.map(item => setAmountToPay([...amountToPay, item.amountToPay]))存在两个问题：

1. 循环调用setState：map会遍历每个item，每次都调用setState，而React的setState是异步的，多次调用会基于同一个旧状态更新，导致最终数组长度异常。
2. 累加而非替换：每次更新都在原数组后面追加，没有重置数组，所以每次serviceItem变化时，都会把新的元素再加一遍，造成重复。

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