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 并进行了最小的更改。你可以即兴创作整个事情。
我正在渲染一些卡片,点击卡片后,我有相应的模态。卡片及其模式都有一个心形图标,我想在单击其中一个时将它们标记为“收藏夹”。我有一个“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 并进行了最小的更改。你可以即兴创作整个事情。