我在使用钩子(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
(添加键的对象) 不会触发..
为什么会发生这种情况,我该如何让它发挥作用?
最佳答案
setInterval(() => {
setDependency1(prevDep1 => {
const _key = "test_" + Math.random().toString();
return {...prevDep1, [_key]: [...(prevDep1[_key] || []), 'foo'] }
})
setDependency2(prevDep2 => [...prevDep2, Math.random()]);
}, 1000);
状态应该以不可变的方式更新。
关于reactjs - 为什么 useEffect 钩子(Hook)不触发依赖项数组中的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62660066/