React购物车按钮状态持久化：如何获取itemId更新isAdded状态？

当前实现逻辑 #

• 通过useState维护商品是否已加入购物车的状态：

const [isAdded, setIsAdded] = useState(false);

• 按钮根据isAdded状态切换显示文本，点击时传入商品ID触发handleCart函数：

<button
  type="button"
  className="addToCart"
  onClick={() => handleCart(item._id)}
>
  {isAdded ? "REMOVE FROM CART" : "ADD TO CART"}
</button>

• handleCart函数调用后端接口完成商品的添加/移除操作，同时切换isAdded状态：

const handleCart = async (itemId) => {
  const response = await fetch(
    `http://localhost:8000/add-or-remove-item-from-cart/${itemId}`,
    {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({
        userId: user._id,
      }),
    }
  );
  const data = await response.json();
  setIsAdded(!isAdded);
};

后端接口功能正常，可正确判断并执行商品的添加或移除操作。

需求与现存问题 #

需要实现两个核心需求：

1. 用户点击按钮时，按钮文本立即更新；
2. 页面刷新后，按钮状态能与用户购物车的实际状态同步。

当前点击按钮时，通过setIsAdded(!isAdded)可实现文本即时更新，但页面刷新后状态会重置。尝试使用useEffect根据用户购物车数据同步状态，预期代码如下：

const { user } = useContext(AuthContext); // 用户数据来自Context API

useEffect(()=>{
  setIsAdded(user.cartItems.includes(itemId)) // 若商品在购物车中则设为true，否则为false
},[itemId])

但现在遇到的问题是：无法在useEffect和handleCart函数中访问到itemId，请问该如何实现状态持久化？

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