如何将React状态grandTotal的值赋值给installmentFileCategory的对应字段？

要把grandTotal状态的值同步到installmentFileCategory数组中对象的grandTotal字段，有两种常见实现方式：

一、自动同步（grandTotal变化时立刻更新） #

通过useEffect监听grandTotal的变化，一旦它的值改变，就自动更新installmentFileCategory：

import { useState, useEffect } from 'react';

// 组件内部代码
const [grandTotal, setgrandTotal] = useState(0);
const [installmentFileCategory, setInstallmentFileCategory] = useState([
  {
    projectId: 0,
    phaseId: 0,
    blockId: 0,
    plotSizeId: 0,
    rate: 0,
    grandTotal: 0,
  },
]);

// 监听grandTotal变化，同步更新目标状态
useEffect(() => {
  setInstallmentFileCategory(prevState => {
    // 复制原数组，修改第一个元素的grandTotal字段
    return prevState.map((item, idx) => {
      if (idx === 0) { // 这里针对数组第一个元素，可根据实际需求调整匹配条件
        return { ...item, grandTotal: grandTotal };
      }
      return item;
    });
  });
}, [grandTotal]); // 仅当grandTotal变化时执行

二、手动触发同步（按需更新） #

如果不需要实时同步，而是在特定操作（比如点击按钮）时才更新，可写一个触发函数：

// 定义同步函数
const syncGrandTotal = () => {
  setInstallmentFileCategory(prevState => {
    return prevState.map((item, idx) => {
      if (idx === 0) {
        return { ...item, grandTotal: grandTotal };
      }
      return item;
    });
  });
};

// 在按钮中调用触发同步
<button onClick={syncGrandTotal}>同步合计金额</button>

关键注意点 #

• React状态是不可变的，必须通过setInstallmentFileCategory更新，且要用展开运算符...复制原数组和对象，避免直接修改原状态。
• 如果数组中有多个元素，可根据projectId等唯一标识匹配目标元素，替换示例中的idx === 0即可。

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