本文讲解为何点击单张卡片的“active”按钮会导致所有卡片同时激活，并提供基于唯一 id 的状态管理方案，确保每张卡片的样式切换互不干扰。
本文讲解为何点击单张卡片的“active”按钮会导致所有卡片同时激活，并提供基于唯一 id 的状态管理方案，确保每张卡片的样式切换互不干扰。
在 React 中，当多个 UI 元素（如卡片）共享同一个 useState 管理的类名变量（如 className），任何对该状态的更新都会
全局生效
——这正是问题根源：你为所有
绑定了同一个 className 值，因此调用 setClassName() 会同步刷新每张卡片的样式，无论点击的是哪一张。
要实现「点击某张卡片的 Active 按钮，仅该卡片高亮」，关键在于
将状态粒度从「全局类名」下沉到「激活卡片的 ID」
。我们不再维护一个通用的 className 字符串，而是用一个 activeId 状态记录当前被激活卡片的唯一标识，并在渲染时通过条件判断动态生成每个卡片的类名。
以下是优化后的核心实现：
✅
关键改进说明：
React Native For Android 源码编译 中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
下载
使用 activeId（而非 className）作为单一状态源，语义清晰、职责明确；
每次 map 渲染时，通过 activeId === article.id 实时计算该卡片应使用的类名，完全解耦；
支持「单选」或「切换」逻辑（示例中采用点击即切换，也可改为仅激活、不取消）；
若需默认激活某张卡片（如首张），可初始化为 useState(articles[0]?.id || null)。
⚠️
注意事项：
确保 article.id 在列表中
唯一且稳定
（推荐使用后端返回的真实 ID，避免用数组索引 index）；
不要在 map 内部调用 setState（如原代码中 Status 里的 filter 判断无实际意义，且 articles.filter(...) 返回数组而非布尔值，存在逻辑错误）；
类名拼接建议使用 clsx 或 classnames 库提升可读性与健壮性（尤其当样式条件增多时）。
通过这种「状态 ID 化 + 渲染时条件合成」的设计模式，你不仅能精准控制单个卡片的视觉状态，也为后续扩展（如多选激活、持久化激活状态等）打下清晰基础。
import { useState } from 'react';
function GridMod({ articles, updateArticleList }) {
// ✅ 状态改为存储激活卡片的 id（初始为 null，表示无激活）
const [activeId, setActiveId] = useState(null);
const handleStatusToggle = (id) => {
// 点击即切换：若已激活则取消，否则设为当前 id
setActiveId(prev => prev === id ? null : id);
};
const handleRemove = async (id) => {
try {
await axios.delete(`http://localhost:3001/articles/${id}`);
const updatedArticles = articles.filter(article => article.id !== id);
updateArticleList(updatedArticles);
} catch (error) {
console.error('删除失败:', error);
}
};
return (
{articles.map((article) => {
// ✅ 动态计算当前卡片的 className
const cardClass = activeId === article.id
? "card mb-3 border-3 border-info" // 激活态：蓝色边框
: "card mb-3 border-3"; // 默认态：无色边框
return (
{article.title}
{article.description}