Reactjs 确保路径由变量trigger React.usemo定义的嵌套字段在添加到依赖项数组时更新

我使用TypeScript 4和React 17

我在自定义挂钩中有以下代码：

  const myValue = useMemo((): string[] => {
    if (someCondition) {
      return (myMap?.field && myMap.field.[subfieldId]) || null
    } else {
      ...
    }
  }, [myMap.field.[subfieldId]])

ESlint抱怨必须将myMap.field.[subfielddid]移动到一个变量中以进行编程检查

所以我改为：

  const currentData: string[] | null = (myMap?.field && myMap.field.[subfieldId]) || null

  const myValue = useMemo((): string[] => {
    if (someCondition) {
      return currentData
    } else {
      ...
    }
  }, [currentData])

我不确定在每次渲染时重新计算变量的上限是否是一种好的做法，我甚至担心会创建一个无限循环

ESLInt建议我这样做，这要简单得多：

  const myValue = useMemo((): string[] => {
    if (someCondition) {
      return (myMap?.field && myMap.field.[subfieldId]) || null
    } else {
      ...
    }
  }, [myMap.field])

---

myMap.field是否足以让React发现myMap.field[子字段]发生了更改？我想应该是这样。实际上，如果我只放置myMap，React将不知道更改了什么，因为对象引用本身不会更改，但是在比较以前的myMap.field和新的myMap.field时，React会检查所有子字段。是吗？

根据反应钩短绒：

React Hook React.useMoom有一个不必要的依赖项：“myMap”。排除它或删除依赖项数组。像“myMap”这样的外部作用域值不是有效的依赖项，因为改变它们不会重新呈现组件。（反应钩/详尽的DEP）

所以你应该对这个很好：

const myValue=useMoom（（）：字符串[]=>{
如果（某些条件）{
返回myMap？.field[子字段]| | null
}否则{
// ...
}
}，[子域]；

No，react不比较属性，它只对主对象进行引用比较。如果你能详细说明你的代码实际上是做什么的，那么建议一个解决方案就容易多了。嗨，谢谢你提供的信息。我需要有条件地返回字段myMap.field.[subfielddid]中包含的值，或者从另一个类似的subfielddid2字段返回另一个值。我不知道子文件ID，这些是定制钩子的参数。