反应“TypeError：传播不可迭代实例的无效尝试”

Question

我正在使用 API 来呈现卡片中的数据，每张卡片都有一个心形图标，单击该图标会将卡片的状态更改为收藏。每张卡片都有一个相应的模态（我正在使用 [material ui modal][1] and ），它也有心形图标，我需要这样做，以便当单击模态上的心形时，模态和其对应的卡片获得最喜欢的状态。

最初我更改了卡片和模态组件中的状态，并且有一段代码如下所示：

  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 attempt to spread non-iterable instance”。

Answer 1

您忘记将 favoriteBeers 的新值传播到一个数组中：

setFavoriteBeers([
  ...favoriteBeers,
  beers.find(beer => beer.id === id)
])