本文详解如何在 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 实现，关键点包括：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 使用函数式更新 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 响应状态变化 |
| 删除后分页逻辑混乱 | 明确语义：是「局部过滤」还是「服务端分页重载」？选择其一并统一处理 |
遵循函数式更新原则，合理拆分状态依赖与副作用，即可彻底规避此类竞态陷阱，写出可预测、易维护的 React 数据流逻辑。
