时间戳

首页 > 解决方案 > 项目数组的 useCallback 依赖项

reactjs - 项目数组的 useCallback 依赖项

问题描述

我有一张卡片清单。当我通过按下按钮将它们添加到收藏夹时，它会更改该按钮的颜色。但是，我只想在添加到收藏夹后重新渲染该特定卡片。

const addFavouriteHandler = useCallback((id: number) => {
   dispatch(addFav(id));
}, [ ?? ])

// This is my card in the list
<MovieCard
   key={movie.id}
   movie={movie}
   addFavourite={addFavouriteHandler}
   removeFavourite={removeFavouriteHandler}
   isFavourite={isFavourite}
/>

这里的 useCallback 依赖项是什么？

标签： reactjsreact-hooksusecallback

解决方案

很可能您收到有关缺少函数依赖项的警告dispatch，因此您useCallback将是：

const addFavouriteHandler = useCallback((id: number) => {
   dispatch(addFav(id));
}, [dispatch]);

真正的问题是，在这种情况下，我认为您不需要自定义钩子，只需编写：

const addFavouriteHandler = (id: number) => {
   dispatch(addFav(id));
};

然后，如果要MovieCard在将其添加到收藏夹后进行渲染，则isFavourite类似于：

isFavourite = arrayOfFavourites.includes(movie.id)

数组在哪里arrayOfFavourites填充dispatch(addFav(id));，那么您MovieCard肯定会重新渲染，因为现在卡 ID 已打开arrayOfFavourites。

推荐阅读