本文讲解如何在 React 列表渲染中，实现“仅在当前行复选框被勾选时显示对应删除按钮”，避免全局状态导致所有行按钮同时显示的问题。核心是为每个列表项维护独立的 showDelete 状态，而非共用单一布尔值。
本文讲解如何在 react 列表渲染中，实现“仅在当前行复选框被勾选时显示对应删除按钮”，避免全局状态导致所有行按钮同时显示的问题。核心是为每个列表项维护独立的 `showdelete` 状态，而非共用单一布尔值。
在原始代码中，使用单一的 myCheck 状态变量（useState(false)）来控制所有行的删除按钮显隐，导致一旦任一复选框被勾选，myCheck 变为 true，进而所有 <button> 都被渲染——这违背了“按行独立控制”的需求。
正确解法是：将状态粒度下沉至每一项数据本身。我们不再用一个布尔值，而是为每个游戏项定义一个对象，包含 label 和 showDelete 字段，并将整个数组作为状态管理：
const [games, setGames] = useState([
{ label: 'cricket', showDelete: false },
{ label: 'vollyboll', showDelete: false },
{ label: 'football', showDelete: false }
]);接着，为每行绑定独立的切换逻辑：
const toggleDeleteButton = (index) => {
const updated = [...games];
updated[index].showDelete = !updated[index].showDelete;
setGames(updated);
};注意：必须先创建新数组副本（如 const updated = [...games]），再修改其子项属性，最后调用 setGames(updated)。直接修改原数组或原对象属性（如 games[index].showDelete = ...）会导致 React 无法检测到变化，视图不更新。
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
在 JSX 渲染中，即可基于当前项的 ele.showDelete 安全判断是否显示按钮：
<input
type="checkbox"
checked={ele.showDelete}
onChange={() => toggleDeleteButton(i)}
/>
{ele.label}
{ele.showDelete && <button onClick={() => deleteItem(i)}>Delete</button>}✅ 关键优化点说明：
- 使用 checked={ele.showDelete} 而非 value，确保复选框视觉状态与数据严格同步；
- 删除操作 deleteItem(i) 仍通过 filter 安全移除指定索引项，不影响其他状态；
- 每个 key 使用唯一标识（推荐用 ele.label 或更佳的 id 字段），避免因索引变动引发渲染异常。
? 进阶建议：
若需支持多选后批量删除，可将 showDelete 替换为 isSelected: boolean，并配合「全选/反选」按钮及「批量删除」功能统一管理；但本例聚焦单行精准控制，保持状态最小化与语义清晰性。
最终效果：点击某一行的复选框，仅该行出现删除按钮；取消勾选则按钮立即消失——行为完全解耦、响应精准、符合直觉。
