项目数组的 useCallback 依赖项答案

【问题标题】：useCallback dependencies for array of items项目数组的 useCallback 依赖项
【发布时间】：2021-09-03 06:50:11
【问题描述】：

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

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 这里的依赖是什么？

【问题讨论】：

你能提供更多的上下文吗？
我认为 Giovani 的答案如下，但您应该高度考虑将React hooks eslint plugin 添加到您的项目中，因为它会标记并通知你缺少什么。

标签： reactjs react-hooks usecallback

【解决方案1】：

您很可能收到关于缺少 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。

【讨论】：

感谢您的指出，但有没有办法只重新渲染触发 onClick 的那张卡片？
@LokeshBajracharya 只需将MovieCard 状态连接到当您将卡添加到收藏夹时会发生变化的东西。我认为在MovieCard 中，您在 html 上有一些连接到 isFavourite 属性的内容（卡片上的图标表示该卡片是最喜欢的卡片）。在这种情况下，卡片将被重新渲染。我对MovieCard 的假设错了吗？