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

React仅在确定依赖项更改时才检查引用是否相等，因此，如果旧值和新值通过===检查，它将视为未更改。

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

Answer 2

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

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

Answer 3

您将在此处返回分配语句：

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

您应该返回一个对象。也许像这样：

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

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

3 个答案: