Reactjs useEffect React Hook：检测数组中每个对象的属性变化

堆栈溢出

我有一个问题，特别是关于

useffect

hook。我知道，

useffect

hook的一个用例是捕获某些状态变量的变化

假设我们有以下代码：

const MyComponent = () => {
  const [sv, setSv] = useState([
    {
      a: 1,
      b: { c: 'val11', d: 'val12', e: 'val13' }
    },
    {
      a: 8,
      b: { c: 'val21', d: 'val22', e: 'val23' }
    },
    {
      a: 19,
      b: { c: 'val31', d: 'val32', e: 'val33' }
    }
  ]);

  const someCallback = useCallback(() => {
    console.log('change triggered!')
  });

  useEffect(someCallback, [sv]);
}

我们还假设

sv

是一个对象数组，每个对象都有相同的键集，但与这些键关联的值不同

如果我想在上执行

someCallback

对

sv

所做的任何更改，包括嵌套在数组

sv

所包含的每个对象中的对象，它就可以正常工作

现在，我们假设只有当数组

sv

中每个对象的某些属性发生更改时，才需要执行

someCallback

。例如，我只想监视对

b.c

和

b.d

的更改。我认为可行的方法是：

useEffect(someCallback, [sv.map(item => item.b.c), sv.map(item => item.b.d)]);

然而，它根本没有触发。这可能是因为

Array.map

，但是，我想不出任何其他方法来映射必要的值

非常感谢您的帮助

---

谢谢

那么，您肯定不能在useffect依赖项中使用

map

。您使用

map

的方式也不正确

我能想到的是，如果你想看的关键只是几个，你可以直接使用

 useEffect(someCallback, [sv[0].a, sv[1].a, sv[1].b.c]);

---

我认为使用扩展操作符应该有效

useEffect(someCallback, [...sv.map(item => item.b.c), ...sv.map(item => item.b.d)]);

---

如果您分散映射的数组，那么实际上应该可以工作<代码>使用效果（someCallback，[…sv.map（item=>item.b.c），…sv.map（item=>item.b.d）]也许您可以保持以前的状态，检查您想要更改的对象部分是否在新状态中更改。在useEffect中执行此操作（比较新状态和以前状态）。这是一种混乱的方式，但它应该会起作用。我的问题与长度未知的数组有关，例如，

sv

的长度不是静态的。除此之外，这将是一个很好的解决方案。获取错误：

传递给useEffect的最终参数在渲染之间更改了大小。此数组的顺序和大小必须保持不变。上一个：[]传入：[[对象]]