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

Question

页面显示对象列表

[{name:, age:}, ...]

第二页允许更新特定对象的名称。 然后使用钩子，我应该如何实现

useEffect()

，以便仅在检测到名称更改时才更新首页上的列表？

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

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

Answer 1

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

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

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

Answer 2

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

一个人可以做：

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

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

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

Answer 3

以前的答案都不适合我

这是我的解决方案：

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

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

通过这种方式，您可以从状态中提取值，一旦这些值中的任何一个发生更改，就会触发 useEffect

Answer 4

// using JSON.stringify(object)
useEffect(() => {
   // your code here...
}, [JSON.stringify(dependencyObject)]);

最好的解决方案是使用

JSON.stringify(object)

，因为它不会导致初始加载时出现任何错误，也不会发出有关依赖变量大小变化的警告。

---

// using spread operator
useEffect(() => {
   // your code here...
}, [ ...Object.values(dependencyObject) ]);

如果对象在初始加载中为空/未定义，则在对象键和值上使用扩展运算符的解决方案将导致错误。

/* 
  Also if you make a custom function that either returns the 
  values or empty array then React will give a warning about 
  the size change in dependency array.
*/
const getDependencies = (addressType: Address) => {
if (addressType) {
  return Object.values(addressType);
}
return [];
}

useEffect(() => {
   // your code here...
}, [ ...getDependencies(dependencyObject) ]);

所以使用 JSON.stringyfy(object)。当对象未定义或为 null 时，它不会给出任何错误，并且 React 不会抱怨依赖变量大小的变化。

Answer 5

请为嵌套对象添加 JSON.stringify。

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