React中如何对比新旧状态数组并返回发生变更的对象ID

• useEffect语法写错了：箭头函数方向写反，回调没有正确闭合，依赖数组位置不对，拿到对比结果后也没有后续处理逻辑
• 对比逻辑完全不满足需求：
  • 用for...in遍历数组拿到的是索引，直接对比索引对应的项本质是比对象引用，根本没深入对比对象里的指定字段
  • 只按数组顺序对应对比，只要数组顺序变了就会对错对象，产生误判，没有用唯一id匹配同一条数据
  • 返回值不对：找到第一个差异就直接返回true，既没收集所有变更项的id，也没返回要求的id集合
  • 没处理边界情况：比如新数据新增条目、旧数据被删除的场景完全没覆盖，也没做字段存在性校验

先定义你需要校验的字段列表，替换成你自己的业务字段即可：

import { useState, useEffect } from 'react';

// 这里替换成你实际需要对比的字段名
const NEED_COMPARE_FIELDS = ['title', 'status', 'count'];

export default function DataCompareComponent() {
  // oldData是固定不变的旧数据副本
  const [oldData, setOldData] = useState(/* 传入你的旧数据初始值 */);
  const [newData, setNewData] = useState(/* 传入你的新数据初始值 */);

  useEffect(() => {
    const changedIds = getChangedItemIds(oldData, newData, NEED_COMPARE_FIELDS);
    // 这里写你拿到变更id后的业务逻辑
    console.log('发生变更的条目id：', changedIds);
  }, [newData]);

  /**
   * 对比新旧数组，返回所有指定字段发生变更的条目id
   * @param {Array} oldList 旧数据数组
   * @param {Array} newList 新数据数组
   * @param {Array} compareFields 需要校验的字段列表
   * @returns {Array} 变更条目id集合
   */
  const getChangedItemIds = (oldList, newList, compareFields) => {
    const changedIds = new Set();
    // 把旧数据转成id为key的映射，不受数组顺序影响，对比性能更高
    const oldItemMap = new Map(oldList.map(item => [item.id, item]));

    newList.forEach(newItem => {
      const matchOldItem = oldItemMap.get(newItem.id);
      // 新数据里存在旧数据没有的条目，属于新增，判定为变更
      if (!matchOldItem) {
        changedIds.add(newItem.id);
        return;
      }
      // 逐一校验指定字段，只要有一个字段值不同就判定为变更
      const hasChanged = compareFields.some(field => matchOldItem[field] !== newItem[field]);
      if (hasChanged) {
        changedIds.add(newItem.id);
      }
    });

    // 如果你需要把「旧数据有、新数据被删除」的条目也计入变更，放开下面这段注释即可
    // const newItemIdSet = new Set(newList.map(item => item.id));
    // oldList.forEach(oldItem => {
    //   if (!newItemIdSet.has(oldItem.id)) {
    //     changedIds.add(oldItem.id);
    //   }
    // });

    return Array.from(changedIds);
  };

  return (
    // 你的组件渲染逻辑
    <></>
  );
}

• 用Map存储旧数据的id-条目映射，完全规避数组顺序变化导致的对比错误，比每次遍历查找id对应项的性能更好
• 对比字段完全可配置，不需要校验的字段不会触发变更判定
• 用Set存储变更id，自动去重，不会出现重复id
• 默认将新增条目计入变更，删除条目是否计入可通过注释的代码块自行控制
• 因为你明确说明oldData是不会变更的固定副本，所以useEffect依赖里只保留newData即可；如果后续oldData会更新，一定要把oldData加入依赖数组，避免闭包拿到旧值导致对比错误。

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