React "TypeError: Invalid attempt to spread non-iterable instance"

Question

我正在使用 API 在卡片中呈现数据，每张卡片都有一个心形图标，单击该图标会将卡片的状态更改为收藏夹。每张卡片都有相应的模态（我正在使用 [material ui 模态][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：传播 non-iterable 实例的尝试无效”。

Answer 1

您忘记将 favoriteBeers 的新值散布到一个数组中：

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

React "TypeError: Invalid attempt to spread non-iterable instance"

React "TypeError: Invalid attempt to spread non-iterable instance"

reactjs

material-ui

react-state