使用Immer.js向嵌套状态数组添加元素后React视图不更新

1. 修复列表key的唯一性问题 #

当前HistoryCard使用x.date作为key，若同一天存在多次数据更新，会导致多个组件复用同一个key，React无法识别列表项的变化，进而跳过重新渲染。

解决方式：

• 若HistoryCard是函数组件且使用了React.memo，需自定义props比较函数，确保能感知到data数组的变化；若为类组件，避免用PureComponent时忽略数组内部元素更新。
• 可为每个日期分组生成更精准的key，比如结合日期与该分组的data长度（临时方案），或确保分组标识能关联到数据变化。

2. 确保Immer状态更新生成新引用 #

虽然使用了Immer的produce，但需确认状态更新后生成了全新的数组引用：

• 替换draft.history[index].data.push(newElement)为手动创建新数组的方式，强制生成新引用：

  draft.history[index].data = [...draft.history[index].data, newElement];
  

• 更新后打印state.history的引用，确认每次更新后都是新的数组对象。

3. 检查InfiniteScroll组件配置 #

• 确认isData（即hasMore）在新元素添加后是否保持正确状态，若isData变为false，组件可能停止监听数据变化。
• 排查loadMoreHistories逻辑，避免加载更多的操作覆盖新添加的元素。

4. 验证props传递是否正常 #

在ScrollHistory组件中添加监听，确认cardsHistory是否正确更新：

import { useEffect } from 'react';

function ScrollHistory({ cardsHistory, loadMoreHistories, isData }: IProps) {
  useEffect(() => {
    console.log('cardsHistory更新:', cardsHistory);
  }, [cardsHistory]);

  // 原有渲染逻辑
}

如果useEffect未触发，说明cardsHistory引用未变化，问题出在状态更新环节；若触发但视图未更新，问题则在渲染逻辑或HistoryCard组件上。

5. 排查HistoryCard组件渲染逻辑 #

• 若HistoryCard是函数组件且用了React.memo，需自定义比较函数，避免浅比较无法识别数组内部变化：

  const HistoryCard = React.memo(({ date, data }) => {
    // 组件逻辑
  }, (prevProps, nextProps) => {
    if (prevProps.date !== nextProps.date) return false;
    return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data);
  });
  

• 若为类组件，检查shouldComponentUpdate是否错误阻止了更新。

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