React组件useState数组操作需求：元素存在移除、不存在添加

你的代码核心问题是直接使用当前items状态生成新数组时，可能因为闭包捕获到旧的状态值，导致多次点击时更新逻辑基于过期的状态，进而出现旧数据被意外移除的情况。

修正方案：使用useState的函数式更新 #

改用setItems的回调形式，确保每次更新都基于最新的状态值计算：

import React, { useState } from "react";
const Home = () => {
  const [items, setItems] = useState([]);
  const checkboxClick = (item) => {
    // 使用函数式更新，prevItems是当前最新的状态
    setItems(prevItems => {
      const index = prevItems.findIndex((i) => i._id === item._id);
      if (index === -1) {
        // 不存在则添加，返回新数组（不修改原数组）
        return [...prevItems, item];
      } else {
        // 存在则移除，通过slice创建新数组（避免splice修改原数组）
        return [...prevItems.slice(0, index), ...prevItems.slice(index + 1)];
      }
    });
  };

  return (
    <>
      {/* 给map元素添加唯一key，避免React渲染警告 */}
      {data.map((item) => (
        <button key={item._id} onClick={() => checkboxClick(item)}>
          {items.some(i => i._id === item._id) ? '移除' : '添加'}
        </button>
      ))}
    </>
  );
};

关键优化点说明 #

• 函数式更新：setItems(prev => ...) 中prev始终是React维护的最新状态值，彻底避免闭包导致的旧状态问题。
• Immutable更新：用扩展运算符...和slice创建新数组，不直接修改原状态数组（符合React状态不可变的原则）。
• 按钮文本优化：根据item是否已选中动态切换按钮文本，提升用户体验。
• 添加key属性：给map渲染的按钮设置唯一key（用item._id），避免React虚拟DOM比对时的警告。

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