React 17.0.2函数组件数组为空却未更新UI，移除key后恢复正常

问题原因 #

核心问题出在React的列表更新机制与图片加载的异步触发时机冲突，结合key的作用导致UI未正确更新：

1. 当为列表项设置唯一key时，React会通过key追踪组件身份。理论上validList变为空数组时，React应卸载所有列表项，但图片加载的异步特性导致状态更新时机与组件渲染时机错位：

   • 组件首次渲染时，validList是原始列表，UI渲染所有项；
   • 图片加载出错的onerror事件异步触发，多次调用setImgErrorIds添加错误ID；
   • 尽管validList最终会变为空数组，但由于key的存在，React在批次处理异步状态更新时，未正确识别所有列表项需被卸载。

2. 移除key后，React默认使用数组索引作为key。此时validList从有元素变为空，React会直接对比新旧列表长度，立即卸载所有列表项，UI因此能正确更新。

另外你的代码还有两处优化点：

• filter中用imgErrorIds.find效率偏低，建议替换为!imgErrorIds.includes(id)；
• useEffect未清理图片加载监听，可能引发内存泄漏，需在组件卸载或list变化时移除onerror事件。

修复后的代码 #

const ListComponent = ({ list }) => {
  const [imgErrorIds, setImgErrorIds] = useState([]);

  const validList = useMemo(
    () => list.filter(({ id }) => !imgErrorIds.includes(id)),
    [imgErrorIds, list]
  );

  useEffect(() => {
    const imageElements = [];

    list.forEach(({ imageUrl, id }) => {
      const img = new Image();
      imageElements.push(img);
      
      const handleError = () => {
        setImgErrorIds(prev => [...prev, id]);
        img.onerror = null; // 清理监听
      };

      img.onerror = handleError;
      img.src = imageUrl;
    });

    // 清理函数：卸载组件或list变化时移除图片错误监听
    return () => {
      imageElements.forEach(img => {
        img.onerror = null;
      });
    };
  }, [list]);

  return (
    <>
      {validList.map(({ name, id, imageUrl }) => (
        <div key={id}>
          <img src={imageUrl} />
          <p>{name}</p>
        </div>
      ))}
    </>
  );
};

额外说明 #

• 务必确保JSX中的validList.map被包裹在{}中，否则会被解析为文本而非JS表达式（这也可能是你问题的潜在诱因）；
• includes比find更高效，因为find会遍历数组直到找到匹配项，而includes直接返回布尔值；
• 添加清理函数可避免内存泄漏，防止组件卸载后onerror事件仍触发导致不必要的状态更新。

内容的提问来源于stack exchange，提问作者Gagan Deep Shivshankar