问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
唐伯虎点蚊香
    41629162219
      const [info, setInfo] = useState({
    name:'李光洙',
    age:'40'
  });
  useEffect(() => {
    console.log('监听成功')
  }, [info.name]);

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

    react-hooksreact
    阅读 3.5k
    avatarAI 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.2k2525

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

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

      头像
      乔治
        13.1k1329
        const [info, setInfo] = useState({
  name: '李光洙',
  age: '40'
});
const [name, setName] = useState(info.name);

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

useEffect(() => {
  console.log('监听成功');
}, [name]);
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题