我会采取以下方法处理这个问题

const [starred, setStarred] = useState({
    "1": false,
    "2": false,
    "3": false
  });
  const Star = ({ buttonId }) => (starred[buttonId] ? <AiFullStar /> : <AiOutlineStar />);
  return (
    <div className="App">
      <button
        onClick={() =>
          setStarred((prevState) => ({ ...prevState, "1": !prevState[1] }))
        }
      >
        <Star buttonId="1" />
      </button>
      <button
        onClick={() =>
          setStarred((prevState) => ({ ...prevState, "2": !prevState[2] }))
        }
      >
        <Star buttonId="2" />
      </button>
      <button
        onClick={() =>
          setStarred((prevState) => ({ ...prevState, "3": !prevState[3] }))
        }
      >
        <Star buttonId="3" />
      </button>
    </div>
  );
}

Sandbox
我们首先将starred的状态更改为一个包含每个按钮id和true或false状态的对象（如果按钮id被选中或未被选中），然后为图标Star创建另一个组件，并传递给它一个名为buttonId的属性，该属性将用于检查starred[buttonId]是否为true或false，如果为true，则呈现完整的星星，否则呈现带轮廓的星形。
当您单击任何按钮时，您将starred状态设置为一个已修改的对象，其中当前按钮状态更改为与以前相反的状态。