如何解决反应“类型错误:传播不可迭代实例的尝试无效”
我正在使用 API 来呈现卡片中的数据,每张卡片都有一个心形图标,单击该图标时,会将卡片的状态更改为收藏。每张卡片都有一个相应的模态(我正在使用 [material ui modal][1] 和 ),它也有心形图标,我需要这样做,以便当单击模态上的心形时,模态和其对应的卡片获得收藏状态。
最初我更改了卡片和模态组件中的状态,并有一段代码如下所示:
const [isFavorite,setIsFavorite] = useState(false);
const handleIconClick = () => {
setIsFavorite(!isFavorite);
};
前面的代码块处理状态,下面是返回的html的一部分:
<CardActions style={favoriteButtonStyle}>
<IconButton aria-label='add to favorites'>
{!isFavorite ? (
<FavoriteBorderIcon onClickCapture={handleIconClick} />
) : (
<FavoriteIcon onClickCapture={} />
)}
</IconButton>
</CardActions>
现在我需要将模态的状态与初始卡片的状态相匹配,我已将状态移至 App 组件,并且我想创建一个数组以将最喜欢的项目推入其中并尝试使用项目的 id:
>const [favoriteBeers,setFavoriteBeers] = useState([]);
const [isFavorite,setIsFavorite] = useState(false);
const handleSetFavorite = id => {
setFavoriteBeers(
...favoriteBeers,beers.find(beer => beer.id === id)
);
setIsFavorite(true);
console.log(favoriteBeers);
};
const handleRemoveFavorite = id => {
setFavoriteBeers(favoriteBeers.filter(beer => beer.id !== id));
setIsFavorite(false);
};
现在,当我点击卡片上的心形时,所有的卡片都会变成我最喜欢的,当我点击心形时,我会收到“TypeError: Invalid trial to spread non-iterable instance”。
解决方法
您忘记将 favoriteBeers
的新值扩展到数组中:
setFavoriteBeers([
...favoriteBeers,beers.find(beer => beer.id === id)
])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。