如何用箭头键滚动overflow:auto的div？过滤结果时出错求助

• 选中索引超出过滤后列表的长度：过滤后列表项数量减少，但你维护的选中索引还是原来的数值，此时去访问对应位置的元素（或其ref），自然会因为索引越界报错。比如原来选中第8项，过滤后只剩3项，再用索引8去取元素肯定找不到。
• ref集合未同步更新：如果是用数组存储每个按钮的ref，过滤后旧的DOM元素被卸载，但ref数组没有清空或重新生成；或者新渲染的过滤后元素没有正确绑定ref，导致调用scrollIntoView时找不到有效的DOM节点。
• 选中状态未随过滤同步调整：执行过滤操作后，没有及时将选中索引重置为合法值（比如默认选中第一项，或者调整到过滤后列表的有效范围内），后续的键盘导航或滚动逻辑依然基于旧的索引，触发了对不存在元素的操作。
• 异步状态更新导致的时序问题：React的状态更新是异步的，当你触发过滤更新列表数据后，可能立刻执行了滚动或选中逻辑，但此时DOM还没完成重新渲染，ref还没指向新的元素，导致操作失败。

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