React 中正确更新状态：解决异步删除后数据未刷新与页码失效问题_技术教程

本文详解如何在 react 中安全地删除列表元素并同步更新分页状态，重点解决 `usestate` 和 zustand 状态更新的竞态问题，确保 `setrecipes` 和 `setpagenumber` 获取最新值。

在 React 应用中（尤其是结合分页 + 可选删除的列表场景），新手常遇到一个典型问题：删除操作看似执行了，但后续 getData() 仍基于旧数据拉取，导致界面未更新或页码错乱。根本原因在于状态更新的异步性与闭包捕获——你调用 setPageNumber(pageNumber + 1) 时，pageNumber 是渲

染时捕获的旧值；同理，setRecipes(updatedRecipes) 后立即调用 getData()，而 getData() 内部读取的 recipes 和 curPosition 仍是上一轮渲染的快照，造成逻辑错位。

✅ 正确做法：始终使用函数式更新（Functional Updates）

React 官方明确推荐：当新状态依赖于前一个状态时，必须使用函数式更新形式，以确保获取到最新、确定的状态值：

// ❌ 错误：依赖闭包中的旧 pageNumber
setPageNumber(pageNumber + 1);

// ✅ 正确：函数式更新，参数为最新值
setPageNumber(prev => prev + 1);

// 同理，Zustand 的 set 也支持函数式写法（需配合 getState）
setRecipes((state) => {
  const updated = state.recipes.filter(recipe => !selectedItems.includes(recipe.id));
  return { recipes: updated };
});

? 提示：Zustand 的 set 函数默认接收 (state) => newState 形式，天然支持函数式更新，无需额外处理；而 useState 的 setter 必须显式传入函数才能获得最新值。

? 重构 handleDelete：消除竞态，保证数据一致性

以下是修正后的 handleDelete 实现，关键点包括：

使用函数式更新 setPageNumber 和 setRecipes
将 getData 逻辑解耦为纯数据获取函数，并在状态更新后延迟触发（或通过 useEffect 响应状态变更）
避免在 handleDelete 中直接调用 getData()（因其依赖 pageNumber 和 curPosition，而它们尚未完成更新）

const handleDelete = () => {
  // 1. 先过滤数据（使用当前 recipes 值）
  const updatedRecipes = recipes.filter(
    (recipe) => !selectedItems.map(Number).includes(recipe.id)
  );

  // 2. 函数式更新 Zustand 状态（确保 recipes 最新）
  setRecipes(updatedRecipes);
  setSelectedItems([]);

  // 3. 条件更新 page & curPosition（函数式更新！）
  if (curPosition === 0) {
    setPageNumber(prev => prev + 1); // ✅ 关键修复
  }

  // 4. 重置 curPosition 或按需调整（避免旧偏移干扰）
  setCurPosition(0);

  // 5. 触发重新加载 —— 推荐方式：useEffect 监听 pageNumber 变化
  // （见下方 useEffect 优化建议）
};

? 补充：优化 getData 与副作用管理

原代码中 getData() 被手动调用，易与状态更新时机冲突。更健壮的做法是将其与 pageNumber 解耦，并通过 useEffect 自动响应：

useEffect(() => {
  const fetchRecipes = async () => {
    try {
      const { data } = await axios.get(
        `https://api.punkapi.com/v2/beers?page=${pageNumber}&per_page=${recipesPerPage}`
      );
      // 注意：此处直接覆盖，不再拼接（因删除后页码已进位，应从新页开始）
      setRecipes(data);
      setCurPosition(0);
    } catch (err) {
      console.error('Failed to fetch recipes:', err);
    }
  };

  fetchRecipes();
}, [pageNumber, recipesPerPage]); // ✅ 仅当页码变化时重新拉取

⚠️ 注意事项：

删除后若需“保持当前页展示剩余项”，则不应简单 pageNumber++，而应本地过滤并维持页码，仅当当前页无数据时才翻页；

curPosition 在分页场景中若用于“滚动加载”，建议改用 offset 或完全由后端分页控制，避免前端维护复杂偏移逻辑；

控制台 console.log("data ", recipes) 显示旧值是正常现象（React 渲染周期特性），请勿据此判断状态是否更新成功——应检查组件是否重渲染，或在 useEffect(() => { console.log(recipes) }, [recipes]) 中观察。

✅ 总结

问题	正确解法
setPageNumber(pageNumber + 1) 不生效	改为 setPageNumber(prev => prev + 1)
getData() 读取旧 recipes/curPosition	避免手动调用，改用 useEffect 响应状态变化
删除后分页逻辑混乱	明确语义：是「局部过滤」还是「服务端分页重载」？选择其一并统一处理