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

Question

StackOverflow，

我有一个关于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所做的任何更改执行someCallback，包括嵌套在数组sv所包含的每个对象中的对象，那么它就可以正常工作。

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

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

然而，它根本没有触发。这可能是因为Array.map创建了一个新数组，而没有引用上一个数组，但是，我想不出任何其他方法来映射必要的值。

非常感谢您的帮助。

谢谢！

Answer 1

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

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