如何通过 onClick 将对象的布尔值更改为 true？答案

【问题标题】：How can I change the Boolean value of an object to true via onClick?如何通过 onClick 将对象的布尔值更改为 true？
【发布时间】：2023-01-27 18:40:18
【问题描述】：

我正在创建一个购物车，我有三个组件。

第一个组件是一个对象，它携带最近的视频游戏数据。

VideoGameList.js

const VideoGameList = [
  {
    id: 1,
    title: "Fire Emblem Engage",
    price: 59.99,
    inCart: false,
  },
{
    id: 2,
    title: "Pokemon Violet",
    price: 59.99,
    inCart: false,
  },
];

第二个组件是主视频游戏页面，它在一个漂亮的 div 中显示每个视频游戏。每个div里面是一个添加到购物车按钮，如果单击该按钮，则意味着设置 inCart 的值（那个物体的）从错误的到真的但我遇到了麻烦。这是我正在使用的代码。

VideoGame.js

const VideoGame = () => {
  const [cart, setCart] = useState(VideoGameList);

  const handleCartStatus = (cart) => {
    setCart((prevState) =>
      prevState.map((value) => {
        if (value.id === cart.id) {
          return {
            ...value,
            inCart: !value.inCart,
          };
        }
        return value;
      })
    );
  };

  return (
    <>
      <Header />
      <div>
        {VideoGameList.map(
          ({ id, title, price, inCart }, index) => (
            <div>
              <img key={src} src={src} alt={title} />
              <div>
                <p>{title}</p>
                <p>{releaseDate}</p>
              </div>
              <div>
                <p>${price}</p>
                <button
                  onClick={() => handleCartStatus(cart)}
                >
                  Add to Cart
                </button>
              </div>
            </div>
          )
        )}
      </div>
    </>
  );
};

我的handleCartStatus 函数用于映射整个VideoGameList 数组并检查inCart 的值，如果我单击的对象的id 与大批。我将该函数添加到 onClick 并一直在测试 inCart 布尔值是否从 false 变为 true，但事实并非如此。

我想将值从 false 更改为 true 的原因将我带到了我的第三个也是最后一个组件，即 ShoppingCart 页面，它显示了 inCart 值设置为的所有 VideoGameList 对象真的在另一个不错的分区中。

我觉得 useStatue(VideoGameList) 可能有问题，因为我正在从另一个组件导入对象，但即使将整个数组添加到 useState 也无法解决任何问题。请指教。

【问题讨论】：

VideoGameList.map 应该是 cart.map，因为 VideoGameList 永远不会改变。

标签： javascript reactjs

【解决方案1】：

看起来您的代码的问题是您将整个购物车状态传递给 handleCartStatus 函数，而不是您要更新的特定视频游戏对象。在您的 handleCartStatus 函数中，您试图更新与 cart 参数的 id 匹配的视频游戏对象的 inCart 值，但实际上，您将整个购物车状态传递给该函数，该函数没有 id 属性.

要解决此问题，您应该将特定的视频游戏对象而不是整个购物车状态传递给 handleCartStatus 函数。例如，您可以修改 onClick 函数以调用 handleCartStatus 并将视频游戏对象作为参数，如下所示：

<button onClick={() => handleCartStatus(game)}>加入购物车

其中 game 是您当前正在渲染的特定视频游戏对象。

此外，您在返回语句中映射了 VideoGameList，但并未将视频游戏对象传递给 handleCartStatus。

您需要修复的另一件事是您在退货声明中使用的是 VideoGameList 而不是 cart。由于您将 VideoGameList 状态存储在 cart 状态变量中，因此您应该在 return 语句中使用 cart 而不是 VideoGameList 以确保您的组件呈现更新后的状态。
  return (
    <>
      <Header />
      <div>
        {cart.map(
          ({ id, title, price, inCart }, index) => (
            <div>
              <img key={src} src={src} alt={title} />
              <div>
                <p>{title}</p>
                <p>{releaseDate}</p>
              </div>
              <div>
                <p>${price}</p>
                <button
                  onClick={() => handleCartStatus(game)}
                >
                  Add to Cart
                </button>
              </div>
            </div>
          )
        )}
      </div>
    </>
  );
这应该可以解决您的问题，并允许在单击“添加到购物车”按钮时正确更新特定视频游戏对象的 inCart 值。

【讨论】：