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

【问题标题】：useEffect React Hook: detecting the change of a property for each object in an arrayuseEffect React Hook：检测数组中每个对象的属性变化
【发布时间】：2021-08-25 10:20:58
【问题描述】：

堆栈溢出，

我有一个关于React Hooks 的问题，尤其是useEffect 钩子。我知道useEffect 钩子的一个用例是捕获某些状态变量的变化。

假设我们有以下代码：

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 是一个对象数组，每个对象都有相同的一组键，但与这些键关联的值不同。

如果我想对sv 所做的任何更改（包括嵌套在数组sv 包含的每个对象中的对象）执行someCallback，它就可以正常工作。

现在让我们假设只有当数组sv 中每个对象的某些属性发生变化时才需要执行someCallback。例如，我只想监控对b.c 和b.d 的更改。我认为可行的方式是：

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

但是，它根本没有触发。这可能是因为Array.mapcreates a new array with no reference to the previous one，但是，我想不出任何其他方法来映射必要的值。

非常感谢任何帮助。

谢谢！

【问题讨论】：

如果您传播应该实际工作的映射数组。 useEffect(someCallback, [...sv.map(item => item.b.c), ...sv.map(item => item.b.d)]);
也许你可以保持以前的状态，检查你想改变的对象的部分是否在新的状态下改变了。在 useEffect 中执行此操作（比较新状态和先前状态）。这是一个混乱的方式，但它应该工作。

标签： reactjs react-hooks use-effect

【解决方案1】：

好吧，你肯定不能在 useEffect 依赖项中使用map。而且你使用map的方式也不正确。

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

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

【讨论】：

我的问题与未知长度的数组有关，例如sv 的长度不是静态的。除此之外，这将是一个不错的解决方案。

【解决方案2】：

我认为使用 SPREAD 运算符应该可以工作

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

【讨论】：

遇到错误：The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant. Previous: [] Incoming: [[object Object]]