点击时无法将不同SVG元素ID添加至State数组的问题

兄弟，我一眼就看出问题出在State更新的方式上了！你应该是在点击事件里直接把State数组替换成了只包含当前ID的新数组，而不是基于之前的数组去追加新元素。React的State更新是异步的，这种直接覆盖的写法会导致每次点击都丢掉之前的状态，自然就出现了点完1再点2，数组变成[2]而不是[1,2]的情况。

1. 基础版：允许重复添加ID #

使用React的函数式更新，通过prevState获取上一次的数组状态，展开原数组后再添加新ID，这样就能保证每次更新都是基于最新的状态：

import { useState } from 'react';

function SVGSelector() {
  const [selectedIds, setSelectedIds] = useState([]);

  const handleCircleClick = (id) => {
    // 用函数式更新，确保拿到最新的prevState
    setSelectedIds(prevIds => [...prevIds, id]);
  };

  return (
    <div>
      <svg width="300" height="100">
        <circle 
          id="1" 
          onClick={() => handleCircleClick(1)} 
          cx="50" cy="50" r="40" 
          fill="#ff4444" 
          style={{cursor: 'pointer'}}
        />
        <circle 
          id="2" 
          onClick={() => handleCircleClick(2)} 
          cx="150" cy="50" r="40" 
          fill="#33b5e5" 
          style={{cursor: 'pointer'}}
        />
        <circle 
          id="3" 
          onClick={() => handleCircleClick(3)} 
          cx="250" cy="50" r="40" 
          fill="#99cc00" 
          style={{cursor: 'pointer'}}
        />
      </svg>
      {/* 实时预览选中的ID数组 */}
      <p>当前选中ID：{selectedIds.join(', ')}</p>
    </div>
  );
}

export default SVGSelector;

2. 进阶版：避免重复添加同一ID #

如果你希望同一个ID只能被添加一次，就在更新前加个判断，检查ID是否已存在于数组中：

const handleCircleClick = (id) => {
  setSelectedIds(prevIds => {
    // 若ID不存在则追加，存在则返回原数组不修改
    if (!prevIds.includes(id)) {
      return [...prevIds, id];
    }
    return prevIds;
  });
};

React的State更新是异步批量处理的，如果直接写setSelectedIds([...selectedIds, id])，在连续快速点击等场景下，可能拿不到最新的selectedIds值，导致状态更新出错。而函数式更新会确保React传入的prevIds是当前最新的状态，从根源上避免了状态不一致的问题。

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