本文详解如何通过 usestate 精确管理多个复选框的选择状态，仅将用户勾选的数据项实时同步至另一张表格，避免全量渲染，提升交互准确性与性能。
本文详解如何通过 usestate 精确管理多个复选框的选择状态，仅将用户勾选的数据项实时同步至另一张表格，避免全量渲染，提升交互准确性与性能。
在 React 中，使用 useState 处理多选场景时，切忌用单一布尔值（如 isActive）控制全部数据的显示逻辑——这会导致所有项被一并展示，违背“按需选择”的交互意图。正确做法是：用数组状态（selectedArray）记录被选中项的唯一标识（如 id 或索引），再通过条件过滤实现精准渲染。
✅ 正确的状态设计与事件处理
首先，将单值布尔状态替换为可扩展的数组状态：
const [selectedIds, setSelectedIds] = useState<number[]>([]); // 推荐使用 API 返回的 id 字段（更稳定）
在渲染「全部产品表」时，为每个 <input type="checkbox"> 绑定点击事件，并根据当前项的 id 动态更新选中状态（支持勾选/取消勾选）：
{results.map((res) => (
<tr key={res.id}> {/* 注意：key 应使用唯一 id，而非 name */}
<td className="flex items-center py-4">
<input
type="checkbox"
checked={selectedIds.includes(res.id)}
onChange={(e) => {
if (e.target.checked) {
setSelectedIds(prev => [...prev, res.id]);
} else {
setSelectedIds(prev => prev.filter(id => id !== res.id));
}
}}
className="w-[19px] h-[19px] mr-[0.8rem] cursor-pointer"
/>
<div className="flex items-center gap-3">
<img src={avatar} alt="avatar" />
<div>
<div className="text-sm font-medium">{res.name}</div>
<div className="text-sm text-[#667085]">{res.company.name}</div>
</div>
</div>
</td>
<td className="text-sm">₹160</td>
<td className="text-xs">• Not Available</td>
</tr>
))}? 关键改进点：
- 使用
checked属性实现受控组件，确保 UI 与状态严格同步；onChange中区分勾选/取消逻辑，避免重复添加或遗漏移除；key改为res.id，符合 React 最佳实践，防止列表重排异常。
✅ 精准渲染「已选产品表」
不再依赖 isActive 控制整张表显隐，而是直接从原始数据中筛选出已被选中的项，并仅渲染这些项：
{selectedIds.length > 0 ? (
<tbody>
{results
.filter(res => selectedIds.includes(res.id))
.map((res) => (
<tr key={`selected-${res.id}`}>
<td className="flex items-center py-4">
<div className="flex items-center gap-3">
<img src={avatar} alt="" />
<div>
<div className="text-sm font-medium">{res.name}</div>
<div className="text-sm text-[#667085]">{res.company.name}</div>
</div>
</div>
</td>
<td className="text-sm">₹160</td>
</tr>
))}
</tbody>
) : (
<tbody>
<tr>
<td colSpan={2} className="py-6 text-center text-gray-500">
暂无已选产品
</td>
</tr>
</tbody>
)}? 优势说明：
- 渲染逻辑完全解耦于全局开关，真正实现“所选即所见”；
- 添加空状态提示，提升用户体验；
key使用selected-${res.id}避免与原表 key 冲突，保障 DOM 更新稳定性。
⚠️ 注意事项与最佳实践
-
勿用索引（index）作为 key 或选中依据：API 数据顺序可能变化，索引不稳定，应始终优先使用服务端返回的唯一
id； -
避免直接修改 state 数组：务必使用函数式更新（
setSelectedIds(prev => ...)）确保状态更新的可靠性； -
搜索联动优化：当前
handleSearch会重置整个results，若需保留已选项，应在搜索后对selectedIds做存在性校验（例如过滤掉不在新results中的 id）； -
性能考虑：当数据量较大时（>1000 条），可结合
React.memo包裹行组件，或使用虚拟滚动方案。
通过以上结构化改造，你将获得一个响应准确、可维护性强、符合 React 受控组件规范的多选数据同步方案。
