为何修改数组指定元素时所有元素的seen属性均被修改？

你的代码存在几个关键错误，导致所有元素的seen都被设为true，逐一拆解：

1. 变量名与数据结构错误 #

• useState的返回值命名不统一：你定义的是[testarray, testTestArray]，但更新时用了setTest，应该修正为const [testarray, setTestarray] = useState(test);
• testarray是直接的数组对象，不存在data属性，所以testarray.data.map会报错（如果实际运行没报错，大概率是你笔误写成了testarray.map）

2. 核心逻辑错误 #

• map的参数是数组里的完整对象元素，你把它命名为id后，用id === checkID做比较，本质是拿整个对象和数字2对比，永远不会相等，因此所有元素都会进入else分支，把seen设为true
• 逻辑完全写反：你的需求是找到id等于checkID的元素并修改seen，但当前代码是“匹配到目标ID就不修改，其他元素全部设为true”

修复后的代码 #

const test = [
  { id: 0, title: 'test1', seen: false },
  { id: 1, title: 'test2', seen: false },
  { id: 2, title: 'test3', seen: true },
];

const [testarray, setTestarray] = useState(test);
const checkID = 2;

const updateStatus = () => {
  const new_data = testarray.map(item => {
    // 正确对比元素的id属性与目标ID
    if (item.id === checkID) {
      // 返回新对象，修改seen为true
      return {
        ...item,
        seen: true
      };
    } else {
      // 其他元素保持原状态
      return item;
    }
  });

  setTestarray(new_data);
};

额外说明 #

• 如果你需要的是切换目标元素的seen状态（而非强制设为true），可以把seen: true改为seen: !item.seen
• 始终确保修改数组/对象时返回新的引用，避免React无法检测到状态变化（此处用扩展运算符...item已满足要求）

内容的提问来源于stack exchange，提问作者JulesUK