reactjs - 为什么 useEffect 钩子(Hook)不触发依赖项数组中的对象？

Question

我在使用钩子(Hook)时注意到一些非常奇怪的事情，我有以下几点:

import React, { useState, useEffect } from "react";

const [dependency1, setDependency1] = useState({});
const [dependency2, setDependency2] = useState([]);

useEffect(() => {
  console.log("dependency 1 got an update");
}, [dependency1]);

useEffect(() => {
  console.log("dependency 2 got an update");
}, [dependency2]);

setInterval(() => {
  setDependency1(prevDep1 => {
    const _key = "test_" + Math.random().toString();
    if (prevDep1[_key] === undefined) prevDep1[_key] = [];
    else prevDep1[key].push("foo");
    return prevDep1;
  })
  setDependency2(prevDep2 => [...prevDep2, Math.random()]);
}, 1000);

出于某种原因，只有 dependency2 (添加项目的数组) 的 useEffect 触发，dependency1 (添加键的对象) 不会触发..

为什么会发生这种情况，我该如何让它发挥作用？

Answer 1

setInterval(() => {
    setDependency1(prevDep1 => {
      const _key = "test_" + Math.random().toString();
      return {...prevDep1, [_key]: [...(prevDep1[_key] || []), 'foo']   }
    })
    setDependency2(prevDep2 => [...prevDep2, Math.random()]);
  }, 1000);

状态应该以不可变的方式更新。