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

发布于
2023-11-16 北京

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

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

react-hooks react

阅读 4.5k

AI BotBETA

这个问题涉及到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内的函数。

2 个回答

得票最新

cnjs

2.2k2737

发布于
2023-11-16 浙江

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

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

乔治

13.2k2429

发布于
2023-11-16 上海

const [info, setInfo] = useState({
  name: '李光洙',
  age: '40'
});
const [name, setName] = useState(info.name);

useEffect(() => {
  setName(info.name);
}, [info.name]);

useEffect(() => {
  console.log('监听成功');
}, [name]);

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

为什么请求AI的API请求在Apifox中流式输出但在浏览器中一次性输出？

为什么 React 18.3.1 会出现 Invalid Hook Call 错误？如何修复？

ios12promax上人脸识别卡死?