React - Object 字段作为 useMemo 的依赖项

Question

我有以下代码：

   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'。 包含它或删除依赖项 array.eslintreact-hooks/exhaustive-deps

那么，使用 object 字段作为依赖项也无效吗？

Answer 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]);