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

gkl3eglg  于 12个月前  发布在  React
关注(0)|答案(5)|浏览(178)

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

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

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

字符串

sz81bmfz

sz81bmfz1#

不要将整个对象传递给依赖数组,而是确保只传递name。

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

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

字符串

fumotvh3

fumotvh32#

检查https://dev.to/aileenr/til-you-can-watch-for-nested-properties-changing-in-react-s-useeffect-hook-26nj
我们可以做的就是:

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

字符串
如果object属性总是存在,这是一个很好的解决方案,但是如果属性在某个时候不存在,则会出现引用错误。

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

9fkzdhlc

9fkzdhlc3#

之前的答案对我都不管用
这是我的解决方案:

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

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

字符串
通过这种方式,您可以从状态中提取值,一旦这些值发生更改,就会触发useEffect

guykilcj

guykilcj4#

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

字符串

最好的解决方案是使用JSON.stringify(object),因为它不会导致任何初始加载错误或依赖变量大小变化的警告。

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


如果对象在初始加载时为null/undefined,则在对象键和值上使用spread操作符的解决方案将导致错误。

/* 
  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也不会抱怨依赖变量大小的变化。

xggvc2p6

xggvc2p65#

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

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

字符串

相关问题