Next.js中useEffect无法监听数组内部值更新问题

核心问题出在状态更新逻辑不符合React的不可变原则：

• 修改数组内已有元素的逻辑分支中，你直接给查找到的数组对象属性赋值，全程没有调用状态更新方法SetinclusionValue。React只有在调用setXxx方法传入新状态值时，才会触发重渲染和依赖对比，你在handleChange里能打印到修改后的值，只是因为改动了当前作用域引用的原数组对象，这个修改完全没有进入React的状态调度流程。
• 你用JSON.stringify(inclustionValue)作为useEffect依赖，本质是对比序列化后的字符串，但修改已有元素时连组件重渲染都没触发，useEffect拿到的永远是上一次渲染时的旧状态序列化结果，自然不会执行。
  只有新增元素时你调用了SetinclusionValue传入新数组，走了完整的状态更新流程，所以新增元素时effect能正常触发。

• 所有对inclustionValue的修改都必须通过SetinclusionValue执行，修改已有元素时要生成全新的数组和对象副本，不能直接修改原state里的内容
• 去掉依赖里的JSON.stringify(inclustionValue)，只要保证每次更新都返回新的数组引用，直接把inclustionValue作为useEffect依赖即可，JSON.stringify做依赖在数组元素多的时候会产生不必要的性能损耗。

修复后的核心代码如下：

const inclusionHandleChange = (e) => {
  const { name, value } = e.target;
  // 统一处理空值转0的逻辑
  const formatValue = value === '' ? 0 : value;
  // 查找当前输入项是否已存在于状态数组中
  const existIndex = inclustionValue.findIndex((item) => item.itemID === name);
  if (existIndex > -1) {
    // 已存在项：返回新数组，替换对应位置的对象副本，不修改原数组
    SetinclusionValue(prev => prev.map((item, index) => {
      if (index === existIndex) {
        return { ...item, value: formatValue }
      }
      return item
    }))
  } else {
    // 不存在项：追加新元素到新数组中
    SetinclusionValue(prev => [...prev, { itemID: name, value: formatValue }]);
  }
};

useEffect(() => {
  // 增加空值兜底，避免计算出NaN
  const sum = inclustionValue.reduce((accumulator, object) => {
    return accumulator + parseFloat(object.value || 0);
  }, 0);
  SetinclusionValueSum(sum);
// 直接依赖状态数组即可
}, [inclustionValue]);

数值总和不需要单独用useEffect+额外state维护，可以直接用useMemo在渲染阶段计算，减少一次状态更新的开销，代码更简洁：

import { useState, useMemo } from 'react';

// 其他代码省略...

// 直接计算总和，不需要单独维护inclusionValueSum状态
const inclusionValueSum = useMemo(() => {
  return inclustionValue.reduce((accumulator, object) => {
    return accumulator + parseFloat(object.value || 0);
  }, 0);
}, [inclustionValue]);

删掉原来的inclusionValueSum状态定义和对应的useEffect求和逻辑即可，数组变化时会自动算出最新的总和。

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