反应挂钩-当嵌套属性在对象集合中更改时触发useEffect

Question

页面显示对象列表。[{name:, age:}, ...] 第二页允许更新特定对象的名称。然后使用挂钩，如何实现，useEffect()以便仅在检测到名称更改时才更新首页上的列表？

const [objects, setObjects] = useState([]);

useEffect(()=> {
  getAllObjects()
},[getAllObjects, objects]);

Answer 1

人们可以这样做：

useEffect(()=> {
      // do something
}, [values.name])

如果对象属性始终存在，那么这是一个很好的解决方案，但是如果该属性在某些时候不存在，则会出现引用错误。这种情况下的解决方法是检查 hook 内是否存在 prop

useEffect(()=> {
    if (values?.name) {
        // do something
    }
}, [values])

Answer 2

不要将整个对象传递给依赖项数组，而是确保仅传递名称。您可以通过返回名称来完成

const [objects, setObjects] = useState([])

useEffect(()=> {
      getAllObjects()
}, [getAllObjects, ...objects.map(item => item.name)])

就我而言，我需要一个对象，最终得到： `...Object.keys(myObj).map(key => myObj[key])` (7认同)
谢谢，我很高兴我问我自己不会想出这个技巧。不过，这被认为是最佳实践吗？create-react-app linter 发出警告：React Hook useEffect 在其依赖数组中有一个 spread 元素。这意味着我们无法静态验证您是否传递了正确的依赖项。你知道我是否可以在不禁用 linting 的情况下摆脱它吗？ (4认同)
好的，谢谢，我试过了……然后 linter 抱怨表达式太复杂了，我应该将它提取到一个变量中……我做了什么，然后将变量传递给 deps 数组……现在它告诉我变量是不必要的依赖……我的设计可能存在缺陷…… (2认同)