为什么 useEffect 钩子不触发依赖项数组中的对象？

Question

我在使用钩子时注意到一些非常奇怪的事情，我得到以下信息：

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

您在此处return赋值语句：

setDependency1(prevDep1 => prevDep1["test_" + Math.random().toString()] = ["foo"]);

你应该return一个对象。也许是这样的：

setDependency1(prevDep1 => ({ ...prevDep1, ["test_" + Math.random().toString()]: ["foo"] }));

Answer 2

React 只会在确定依赖项发生更改时检查引用是否相等，因此如果旧值和新值通过了 === 检查，则认为它没有变化。

在您的第一个依赖项中，您只是向现有对象添加了一个键，因此没有更改实际对象。当将旧值传播到新数组时，第二个依赖项实际上被完全替换。

Answer 3

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

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

为什么 useEffect 钩子不触发依赖项数组中的对象？

Why doesn't a useEffect hook trigger with an object in the dependency array?

reactjs

react-hooks

use-effect

use-state