React应用中如何实现点击Div时切换数组元素的添加与移除

首先，你的核心需求是切换数字在目标数组中的存在状态——点击时如果数字不在数组就添加，已经存在就移除。你当前的函数只做了添加操作，缺少判断和移除逻辑，我们来修改它：

1. 修正状态更新函数 #

把你的pushClickedNumber函数改成这样：

const pushClickedNumber = (number) => {
  setArrayOfNumbers(prevNumbers => {
    // 检查当前数字是否已经在数组中
    if (prevNumbers.includes(number)) {
      // 如果存在，过滤掉这个数字实现移除
      return prevNumbers.filter(num => num !== number);
    } else {
      // 如果不存在，添加到数组中
      return [...prevNumbers, number];
    }
  });
};

关键逻辑解释：

• 使用函数式更新（prevNumbers => ...）：因为React的状态更新是异步的，直接使用arrayOfNumbers可能拿到的是旧值，用prevState能确保我们基于最新的状态进行修改。
• includes(number)：快速判断数字是否已存在于数组中。
• filter(num => num !== number)：通过过滤掉目标数字，实现移除操作；[...prevNumbers, number]则是扩展原有数组并添加新数字，保证状态不可变。

2. 优化渲染的key属性 #

另外，你在map遍历生成div的时候，记得加上唯一的key属性（这是React列表渲染的最佳实践，避免性能问题和错误）：

{data.map((d) => {
  return (
    <div 
      key={d.name} // 或者用d.number，如果number是唯一的也可以
      onClick={() => pushClickedNumber(d.number)}
    >
      {`${d.name}${d.number}`}
    </div>
  );
})}

3. 可选：给点击项添加激活状态（提升用户体验） #

如果你想让用户直观看到哪些项已经被选中，可以根据数组是否包含对应number来给div添加样式：

{data.map((d) => {
  const isActive = arrayOfNumbers.includes(d.number);
  return (
    <div 
      key={d.name}
      onClick={() => pushClickedNumber(d.number)}
      style={{ 
        padding: '8px',
        cursor: 'pointer',
        backgroundColor: isActive ? '#e0e0e0' : 'transparent',
        border: '1px solid #ccc',
        margin: '4px'
      }}
    >
      {`${d.name}${d.number}`}
    </div>
  );
})}

这样用户点击时就能看到清晰的选中反馈啦～

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