ReactJS：提取对象数组amountToPay值存状态，避免中间值以求和

核心问题分析 #

1. 初始状态错误：amountToPay初始设为字符串""，但实际需要存储数组，应初始化为[]。
2. 重复且错误的状态更新：两个完全相同的useEffect会重复执行；在map里循环调用setAmountToPay会导致多次状态更新，且因闭包捕获旧状态，会出现值叠加的问题。
3. 未过滤无效值：没有处理输入过程中的空字符串等无效值，导致数组混入非有效值。

修复后的代码 #

import { useState, useEffect } from 'react';

function YourComponent() {
  const [serviceItem, setServiceItem] = useState([]); // 原有的serviceItem状态
  const [amountToPay, setAmountToPay] = useState([]); // 初始化为空数组

  useEffect(() => {
    // 从serviceItem中提取有效amountToPay值，过滤空字符串，转为数值
    const validAmounts = serviceItem
      .map(item => {
        const num = Number(item.amountToPay);
        return isNaN(num) ? null : num;
      })
      .filter(val => val !== null);
    
    setAmountToPay(validAmounts);
  }, [serviceItem]);

  // 计算总和
  const total = amountToPay.reduce((sum, num) => sum + num, 0);

  return (
    <div>
      <p>总和: {total}</p>
    </div>
  );
}

export default YourComponent;

关键优化点 #

• 状态初始化修正：将amountToPay初始化为空数组[]，匹配存储多个数值的需求。
• 单次状态更新：在useEffect中一次性生成完整的有效数值数组，再调用一次setAmountToPay，避免多次更新导致的中间值累积。
• 过滤无效值：用Number()转换输入值，通过isNaN()判断是否为有效数值，过滤掉空字符串、非数字等无效值，确保数组中只有可用于求和的数值。
• 移除重复逻辑：删除重复的useEffect，避免不必要的重复执行。

额外建议 #

如果不需要单独存储amountToPay状态，甚至可以直接在计算总和时处理，省去额外的状态维护：

const total = serviceItem.reduce((sum, item) => {
  const num = Number(item.amountToPay);
  return sum + (isNaN(num) ? 0 : num);
}, 0);

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