每个按钮都需要有自己的状态。当您在多个按钮之间共享一个变量时，如果任何处理程序更改了单个变量，则所有操作都将发生变化。

const Example = () => {
  const [buttons, setButtons] = React.useState([
    {name: "Select", id: 1}, 
    {name: "Select", id: 2}, 
    {name: "Select", id: 3},
  ]);

  const handleButtonClick = i => {
    setButtons(prevState => {
      const nextState = prevState.map(btn => ({
        ...btn, name: "Select"
      }));
      nextState[i].name = "Selected";
      return nextState;
    });
  };

  return (
    <div>
      {buttons.map(({name, id}, i) => 
        <button
          key={id}
          onClick={() => handleButtonClick(i)}
       >
         {name}
       </button>
      )}
    </div>
  );
};

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<Example />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

另一种方法是将id传递给点击处理程序，并使用const i = buttons.findIndex(btn => btn.id === id)来确定应该更改哪个按钮的名称。