调用setState后旧数组未删除反而新增，组件未重新渲染的问题

核心问题 #

1. 闭包陷阱：useEffect依赖数组仅包含itemIdToMoveOnTop，但内部用到了myData，导致每次执行时拿到的都是旧状态的myData，处理的不是最新数据，无法触发正确重渲染。
2. 异步状态更新误用：setMyData(null)是异步操作，后续立即用[...myData]复制的还是旧值，这步操作完全无效，还可能导致渲染时myData为null报错。
3. 冗余逻辑：useEffect里已完成过滤，渲染阶段又重复执行filter，不仅冗余，还可能因myData状态更新不及时导致显示异常。

修复代码 #

1. 修正useEffect逻辑（用函数式更新避免闭包）

useEffect(() => {
  if (itemIdToMoveOnTop) {
    setIsLoading(true);
    // 函数式更新获取最新myData状态，彻底解决闭包问题
    setMyData(prevMyData => {
      if (!prevMyData) {
        setIsLoading(false);
        return prevMyData;
      }
      // 复制原数组，避免直接修改状态
      let sortedData = [...prevMyData];
      // 执行排序逻辑
      sortedData.sort((a, b) => {
        if (a.id === itemIdToMoveOnTop) return -1;
        if (b.id === itemIdToMoveOnTop) return 1;
        return 0;
      });
      // 过滤后返回新数组
      const filteredData = sortedData.filter(item => item.info);
      setIsLoading(false);
      return filteredData;
    });
  }
}, [itemIdToMoveOnTop]);

2. 简化渲染逻辑（移除重复过滤）

{isLoading ? (
  <div>Loading...</div>
) : (
  myData ? myData.map(item => (
    <div className="bg-teal-500" key={item.id}>
      <div className="flex flex-row">
        <Speech ref={speechRef} />
        {/* 补充你的其他组件内容 */}
      </div>
    </div>
  )) : null
)}

关键修复点说明 #

• 函数式状态更新：通过setMyData(prev => ...)获取最新状态值，确保每次处理的都是当前最新的myData，解决闭包导致的旧值问题。
• 移除无效的setMyData(null)：异步状态更新不会立即生效，这步操作只会增加状态混乱风险，直接删除即可。
• 统一数据处理：所有排序、过滤逻辑都放在状态更新阶段完成，渲染时直接使用处理好的myData，避免重复计算和状态不一致。

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