react.js - react hooks的useEffect怎么监听对象属性的改变？

Question

  const [info, setInfo] = useState({    name:'李光洙',    age:'40'  });  useEffect(() => {    console.log('监听成功')  }, [info.name]);

求教useEffect这样监听对象的属性为什么不行呢？该怎么监听对象的属性呢？

Answer 1

const [info, setInfo] = useState({  name: '李光洙',  age: '40'});const [name, setName] = useState(info.name);useEffect(() => {  setName(info.name);}, [info.name]);useEffect(() => {  console.log('监听成功');}, [name]);

Answer 2

每次render时，简单理解为一个普通函数在执行，info.name 一直是没变话的。比如 setInfo({ name: '1', age: 18, })后，[info.name] 中 info.name 的值一直是 '1'，所以不会监听成功。

不鼓励把 useEffect 当作一个监听器，而是优先考虑在 setInfo 的地方写相关逻辑

Answer 3

这个问题涉及到React Hooks的工作方式，特别是useEffect。在React中，useEffect是用于执行副作用的函数，它接受一个函数和一个依赖数组作为参数。当依赖数组中的任何值更改时，都会执行该函数。

在你的代码中，你试图通过将info.name添加到依赖数组来监听info对象的name属性的更改。然而，这不会按预期工作，因为info.name是一个字符串，而不是一个引用。在useEffect的依赖数组中，你需要传递对象的引用，而不是它的某个属性。

为了解决这个问题，你可以将整个info对象添加到依赖数组中，如下所示：

const [info, setInfo] = useState({ name:'李光洙', age:'40'});useEffect(() => { console.log('监听成功');}, [info]);

这样，每当info对象更改时（包括其属性的更改），都会执行useEffect内的函数。