React - 未能为具有相同 ID卡片和模态的 2 个元素提供相同的状态

如何解决React - 未能为具有相同 ID卡片和模态的 2 个元素提供相同的状态

我正在渲染一些卡片，点击卡片后，我有相应的模式。卡片及其模态都有一个心形图标，我想在单击它们中的任何一个时将它们标记为“收藏夹”。我有一个“favoriteBeers”数组，我想在其中推送最喜欢的啤酒。我还有另一个名为“favorite”的状态，这是布尔值。问题是这种状态似乎颠倒了（当它应该是真的时它是假的，反之亦然）。此外，似乎只有一个项目在收藏夹数组中，无论我如何尝试将项目设置为收藏夹。

我已经解除了根组件上的数组状态，这是位于那里的一段代码：

  const [favoriteBeers,setFavoriteBeers] = useState([]);

  const handleSetFavorite = id => {
    setFavoriteBeers([...favoriteBeers,beers.find(beer => beer.id === id)]);
  };

  const handleRemoveFavorite = id => {
    setFavoriteBeers(favoriteBeers.filter(beer => beer.id !== id));
    
  };

我还有一个用于卡片的组件，一个用于它的模态。我在两个组件中都有相同的功能：

const [isFavorite,setIsFavorite] = useState(false);

 if (!isFavorite) {
        setIsFavorite(true);
        handleSetFavorite(id);
      } else {
        setIsFavorite(false);
        handleRemoveFavorite(id);
      }
    };

//the icon that calls the function
<IconButton aria-label='add to favorites'>
     {!isFavorite ? (
       <FavoriteBorderIcon
          onClickCapture={e => handleIconClick(e,beer.id)}
        />
      ) : (
         <FavoriteIcon onClickCapture={e => handleIconClick(e,beer.id)} />
  )}
</IconButton>

我还准备了一个带有组件的代码和盒子codesandbox，提前致谢

解决方法

一个问题是，在 <Home> 中，您的 isFavorite 道具是 undefined，因为 <App> 没有传递这样的东西。此外，您没有使用此道具值（当前为 undefined）来初始化 <BeerCard> 或 <BeerCardExpanded> 组件。

第二个问题 - 下面的代码只是更新组件自己的 isFavorite 状态并调用 handleSetFavorite，因为每个组件都有自己的本地 isFavorite 状态。

 if (!isFavorite) {
    setIsFavorite(true);
    handleSetFavorite(id);
  } 

例如，当 <BeerCard> 翻转它的 isFavorite 状态时，<BeerCardExpanded> 不会。所以我删除了这些本地状态并直接使用了 props.isFavorite。

---

这是updated sandbox

我已在 <Home> 中添加了此方法：

const isFavorite = (beer,favoriteBeers) => {
   return favoriteBeers.includes(beer);
};

用于为 isFavorite (<BeerCard>) 的 isFavorite={isFavorite(beer,favoriteBeers)} 属性传递正确的布尔值

和 <BeerCardExpanded> (isFavorite={isFavorite(isClicked,favoriteBeers)}) 组件。

---

我使用了 rest params 语法 ...props 只是为了避免重命名 isFavorite 道具并进行最少的更改。你可以即兴创作。