从useState过滤键导致useRef对象最后一个元素变为null

核心原因：列表key用索引导致的ref绑定混乱 #

你遇到的问题大概率是渲染visuals列表时用了元素索引作为key。当你过滤删除中间某个元素后，React的DOM复用逻辑会出问题：

• 假设原来有3个元素，key是0、1、2，对应ref数组里的ref0、ref1、ref2。
• 删除索引1的元素后，新的visuals列表是[原0,原2]，如果还用索引当key，新key就变成0、1。
• React会认为原key1的DOM节点可以复用给新的第二个元素（原2），而原key2的DOM节点会被卸载，对应的ref2就会被设为null——这就是你看到的“最后一个ref变null”的原因，哪怕你没手动删ref，DOM卸载后React自动把对应的ref置空了。

另外还有一种可能：visual_refs和visuals的同步逻辑有漏洞。useRef的current是可变对象，和React状态（visuals）的更新没有强制绑定。你更新visuals后，ref数组的长度可能还保持原来的长度，而多出来的ref对应的DOM已经被卸载，自然就变成null了。

解决办法 #

1. 换掉索引key，用唯一稳定的ID
   给每个视觉元素分配唯一ID（比如用递增的counter值就行，反正你已经在用counter当索引了）：

   • 创建元素时，把ID和JSX内容一起存进visuals：

     // 创建新元素时
     const newVisual = { id: counter.current, content: <你的JSX元素> };
     set_visuals(prev => [...prev, newVisual]);
     visual_refs.current[counter.current] = React.createRef();
     counter.current += 1;
     

   • 渲染时用这个ID当key：

     {visuals.map(item => (
       <div key={item.id} ref={visual_refs.current[item.id]}>
         {item.content}
       </div>
     ))}
     

   这样React能精准识别每个元素，不会乱复用DOM，ref和元素的绑定关系就不会错。

2. 同步更新ref数组和visuals状态
   当你过滤visuals删除元素时，同步过滤visual_refs.current，只保留对应未被删除元素的ref：

   // 假设要删除id为targetId的元素
   set_visuals(prev => prev.filter(item => item.id !== targetId));
   // 同步过滤ref数组
   visual_refs.current = visual_refs.current.filter((_, idx) => idx !== targetId);
   

   或者因为ID就是counter的递增值，直接把对应位置的ref置空也可以，但过滤更干净。

额外提醒 #

你用filter+reduce修改state的方式是对的，确实避免了状态突变，问题和这个无关——根源在ref与DOM的绑定逻辑，以及React的列表渲染key规则上。

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