React useEffect依赖问题：组件通过map渲染时未触发更新

问题原因分析 #

1. 列表渲染缺少唯一key：父组件在map渲染子组件时未指定key属性，React无法准确区分每个子组件实例，会复用旧组件导致props更新无法被正确感知，进而useEffect不触发。
2. Redux reducer未生成全新对象引用：如果formattedResponse函数内部直接修改原有对象属性后返回原引用，而非创建新对象，那么即使Redux状态看起来更新了，props.someObject的引用其实没有变化——useEffect的依赖是浅比较，引用不变就不会触发回调。

解决方案 #

1. 给子组件添加唯一key #

在父组件的列表渲染中，必须给每个ChildComponent绑定唯一的key，确保React能正确追踪组件实例：

const ParentComponent = props => {
    const renderChildComponent = someObject => {
        return (
            <ChildComponent
               key={someObject.id} // 替换为someObject的唯一标识字段，比如id
               someObject={someObject}
            />
        );
    };

   return (
      <>
         {props.someArrayOfObjectsHandledByRedux.map(renderChildComponent)}
      </>
   )
}

注意：禁止使用数组索引作为key，除非列表完全静态且不会排序，否则会引发组件复用错误。

2. 确保formattedResponse返回全新对象 #

检查并修改formattedResponse函数，确保它返回全新的对象/数组，而非修改原数据后返回：
错误示例（修改原对象，引用不变）：

const formattedResponse = (data) => {
    data.someArrayOfObjects.forEach(item => {
        if (item.id === targetId) item.status = "added";
    });
    return data; // 返回原对象引用
}

正确示例（创建新对象/数组，更新引用）：

const formattedResponse = (data) => {
    return {
        ...data, // 复制原对象的所有属性
        someArrayOfObjects: data.someArrayOfObjects.map(item => {
            if (item.id === targetId) {
                // 返回新对象，仅修改需要更新的属性
                return {...item, status: "added"};
            }
            return item; // 未修改的项可保留原引用，不影响性能
        })
    };
}

这样修改后，当某个someObject更新时，它的引用会变为新的，子组件的useEffect就能检测到依赖变化并触发。

3. 优化useEffect依赖（可选） #

如果只关心someObject.someArrayOfObjects的变化，可以将依赖范围缩小，减少不必要的触发：

useEffect(() => {
    setNeedsConfirmation(
      !!props.someObject.someArrayOfObjects.find(({status}) => status === "added")
    );
}, [props.someObject.someArrayOfObjects]);

前提是someArrayOfObjects在数据变化时会生成新的引用（即formattedResponse中正确创建了新数组）。

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