React - 对象字段作为 useMemo 的依赖项答案

【问题标题】：React - Object field as dependency of useMemoReact - 对象字段作为 useMemo 的依赖项
【发布时间】：2022-01-01 08:09:45
【问题描述】：

我有以下代码：

   const iconMap = useMemo(() => ({
     HomeStacks: {
       iconName: "home",
       iconType: "material-community",
     },
     ActivityStacks: {
       iconName: "bell",
       iconType: "material-community",
       badgeCount: badges["activity"],
     },
   }), [badges["activity"]]);

而且，出于某种原因，ESLint 向我抛出了规则“react-hooks/exhaustive-deps”中的错误：

React Hook useMemo 缺少一个依赖项：'badges'。包括它或删除依赖数组。 eslintreact-hooks/exhaustive-deps

那么，使用对象字段作为依赖是无效的吗？

【问题讨论】：

标签： javascript reactjs react-native react-hooks eslint

【解决方案1】：

确实如此，但eslint 似乎被括号符号访问器弄糊涂了。在 react-hooks/exhaustive-deps 的较新版本中，在依赖项列表中使用点表示法非常好，但是对于任何会抱怨的用例，您始终可以像这样将属性提取到依赖项列表上方的常量（假设您不想要抑制警告）：

 const activity = badges["activity"];
 const iconMap = useMemo(() => ({
     HomeStacks: {
       iconName: "home",
       iconType: "material-community",
     },
     ActivityStacks: {
       iconName: "bell",
       iconType: "material-community",
       badgeCount: activity,
     },
   }), [activity]);

【讨论】：