reduce对象数组每一项求和

1.在一个number数组表单中，求出每一项的和展示，在这使用reduce记录一下

interface TargetInfoParams {
  targetId: string; 
  targetName: string; 
  targetAmt: string; 
  expectNumber: string;
  avgAmt: string; 
}


const [assignValue, setAssignValue] = useState<TargetInfoParams[]>([])

useEffect(() => {
    const tempSum = assignValue.reduce(
      (acc, val) => {
        const { avgAmt, targetAmt, expectNumber } = val;
        acc.targetAmt += Number(targetAmt);
        acc.expectNumber += Number(expectNumber);
        acc.avgAmt += Number(avgAmt);
        return acc;
      },
      {
        targetAmt: 0,
        expectNumber: 0,
        avgAmt: 0,
      }
    );
    setSum(tempSum);
  }, [assignValue]);

2.对展示的所有input在onchange时获取所有值，在setState()所有的对象数组input值，有一个深浅拷贝问题

const [assignValue, setAssignValue] = useState<TargetInfoParams[]>([])

// input输入框赋值
  const handleVal = (
    e: React.ChangeEvent<HTMLInputElement>,
    index: number
  ): void => {
  // 这里要重新赋值一个新的数组进行处理，直接const newAssignArray: any = assignValue这样赋值会有深拷贝问题，由于只有一层结构，使用数组解构形式可以解决深拷贝问题
    const newAssignArray: any = [...assignValue]; 
    newAssignArray[index][e.target.name] = e.target.value;
    setAssignValue(newAssignArray);
  };