React - 无法为具有相同 ID(卡片和模态)的 2 个元素提供相同的状态

React - Failing to give the same state to 2 elements with the same id (card and modal)

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

我已经解除了根组件上的数组状态,这是那里的一段代码:

  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 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);
};

用于为 <BeerCard> (isFavorite={isFavorite(beer, favoriteBeers)})

isFavorite 属性传递相同的正确布尔值

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


我使用 rest params 语法 ...props 只是为了避免重命名 isFavorite prop 并进行了最小的更改。你可以即兴创作整个事情。