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

Posted 2023-03-27

【中文标题】React - 对象字段作为 useMemo 的依赖项

【英文标题】：React - Object field as dependency of 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 向我抛出了规则“re​​act-hooks/exhaustive-deps”中的错误：

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

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

【参考方案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]);