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

gkl3eglg  于 2024-01-07  发布在  React
关注(0)|答案(5)|浏览(195)

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

  1. const [objects, setObjects] = useState([]);
  2. useEffect(()=> {
  3. getAllObjects()
  4. },[getAllObjects, objects]);

字符串

sz81bmfz

sz81bmfz1#

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

  1. const [objects, setObjects] = useState([])
  2. useEffect(()=> {
  3. getAllObjects()
  4. }, [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
我们可以做的就是:

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

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

  1. useEffect(()=> {
  2. if (values?.name) {
  3. // do something
  4. }
  5. }, [values])

展开查看全部
9fkzdhlc

9fkzdhlc3#

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

  1. const [objects, setObjects] = useState([]);
  2. useEffect(()=> {
  3. getAllObjects()
  4. },[getAllObjects, ...Object.values(objects)]);

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

guykilcj

guykilcj4#

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

字符串

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

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


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

  1. /*
  2. Also if you make a custom function that either returns the
  3. values or empty array then React will give a warning about
  4. the size change in dependency array.
  5. */
  6. const getDependencies = (addressType: Address) => {
  7. if (addressType) {
  8. return Object.values(addressType);
  9. }
  10. return [];
  11. }
  12. useEffect(() => {
  13. // your code here...
  14. }, [ ...getDependencies(dependencyObject) ]);


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

展开查看全部
xggvc2p6

xggvc2p65#

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

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

字符串

相关问题