如何在 React 中安全地删除列表元素并更新状态

本文讲解 react 中处理异步状态更新时的常见陷阱，重点解决因 `setstate` 异步性导致的“删除后数据未刷新”问题，并提供基于函数式更新、zustand 状态管理及分页逻辑的完整解决方案。

在 react 中，useState 和 Zustand 的 set 方法均为异步批处理机制，直接读取当前 state 变量（如 pageNumber 或 recipes）再参与计算，极易引发竞态条件（race condition）。你遇到的核心问题正是典型表现：handleDelete 中调用 setPageNumber(pageNumber + 1) 时，pageNumber 是闭包捕获的旧值；而后续 getData() 仍使用该旧值请求第 1 页，导致新数据覆盖了刚删除的列表。

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

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

// ❌ 错误：依赖闭包中可能过期的 pageNumber setPageNumber(pageNumber + 1);  // ✅ 正确：函数式更新，参数 guaranteed 为最新值 setPageNumber(prev => prev + 1);

同理，Zustand 的 set 也支持函数式写法，应避免直接解构旧 state：

// ❌ 避免在 set 中直接引用外部 recipes 变量 setRecipes(updatedRecipes); // recipes 可能已过期  // ✅ 推荐：在 set 回调中读取最新 state set(state => ({   recipes: state.recipes.filter(recipe => !selectedIds.includes(recipe.id)) }));

? 重构 handleDelete：消除竞态，分离关注点

将删除逻辑与数据加载解耦，删除后不再立即调用 getData()（它本意是“加载下一页”，而非“重载当前页”）。正确流程应为：

1. 过滤本地 recipes，更新 Zustand 状态；
2. 清空选中项；
3. 仅当删除导致当前页为空时，才触发下一页加载（需结合分页逻辑判断）。

以下是优化后的关键代码：

const handleDelete = () => {   const selectedIds = selectedItems.map(Number);    // 使用 Zustand 函数式更新，确保基于最新 recipes   useRecipesStore.setState(state => ({     recipes: state.recipes.filter(recipe => !selectedIds.includes(recipe.id))   }));    setSelectedItems([]);    // 判断是否需要翻页：若当前页已无数据且非第一页，则加载下一页   const currentRecipes = useRecipesStore.getState().recipes;   if (currentRecipes.length === 0 && pageNumber > 1) {     setPageNumber(prev => prev + 1); // ✅ 函数式更新   } };

⚠️ 注意：getData() 不应在 handleDelete 中调用。它应严格由 useEffect 在 pageNumber 变化时触发，或由用户手动“加载更多”触发。

? 分页加载逻辑的健壮性增强

你原代码中 curPosition 和 limit 的计算易出错。建议改用更清晰的分页模型：

• pageNumber: 当前请求的页码（从 1 开始）
• recipesPerPage: 每页固定条数（如 15）
• 移除 curPosition，改用 offset = (pageNumber – 1) * recipesPerPage

const url = `https://api.punkapi.com/v2/beers?page=${pageNumber}&per_page=${recipesPerPage}`;  const getData = async () => {   try {     const { data } = await axios.get(url);     // 直接替换为新页数据（非追加），避免拼接逻辑错误     useRecipesStore.setState({ recipes: data });   } catch (error) {     console.error('Failed to fetch recipes:', error);   } };  useEffect(() => {   getData(); }, [pageNumber]); // ✅ 依赖 pageNumber，自动响应翻页

若需「无限滚动」式追加，再启用 useEffect 监听 pageNumber 并追加，但删除操作不应干扰该流程。

✅ 总结：三条黄金准则

1. 永远用函数式更新：setState(prev => …) 或 store.setState(state => …)，杜绝闭包 stale state；
2. 分离副作用与状态更新：删除 → 更新本地状态 → （按需）触发新请求，而非在状态更新后立刻调用异步函数；
3. 简化分页逻辑：优先使用服务端分页（page + per_page），避免客户端维护复杂偏移量（curPosition）。

遵循以上原则，即可彻底规避“删除无效”“页码不更新”等经典 React 异步陷阱，写出可预测、易维护的状态管理逻辑。