React hooks - 当对象集合中的嵌套属性发生变化时触发 useEffect

IT技术 reactjs create-react-app react-hooks
2021-04-14 01:36:44

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

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

useEffect(()=> {
  getAllObjects()
},[getAllObjects, objects]);
2个回答

不要将整个对象传递给依赖项数组，而是确保您只传递名称。您可以通过返回名称来执行此操作

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

useEffect(()=> {
      getAllObjects()
}, [getAllObjects, ...objects.map(item => item.name)])
也许objects.map(item => item.name).concat([getAllObjects])用于依赖数组
2021-05-30 01:36:44
好的，谢谢，我试过了……然后 linter 抱怨表达式太复杂，我应该将它提取到一个变量中……我做了什么，然后将变量传递给 deps 数组……现在它告诉我变量是不必要的依赖……我的设计可能存在缺陷……
2021-06-02 01:36:44
就我而言，我需要一个对象，结果是： ...Object.keys(myObj).map(key => myObj[key])
2021-06-11 01:36:44
@Yannick 由于您知道自己在做什么，因此可以禁用此特定行的 lint 规则
2021-06-12 01:36:44
谢谢，我很高兴我问我自己不会想出这个技巧。不过，它被认为是最佳实践吗？create-react-app linter 发出警告：React Hook useEffect 在其依赖数组中有一个 spread 元素。这意味着我们无法静态验证您是否传递了正确的依赖项。你知道我是否可以在不禁用 linting 的情况下摆脱它吗？
2021-06-16 01:36:44

检查https://dev.to/aileenr/til-you-can-watch-for-nested-properties-changed-in-react-s-useeffect-hook-26nj

一个人可以这样做：

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

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

useEffect(()=> {
    if (values?.name) {
        // do something
    }
}, [values])
其它你可能感兴趣的问题
上一篇如何防止触摸事件的默认处理？ 下一篇如何以编程方式打开/关闭 react-bootstrap 模式？