首页 > 其他 > 详细

React.useEffect() 无限循环怎么解决?

时间:2021-09-02 08:40:45      阅读:26      评论:0      收藏:0      [点我收藏+]

可以通过依赖来解决

无限循环可以通过正确管理useEffect(callback, dependencies)依赖项参数来修复。

因为我们希望count在值更改时增加,所以可以简单地将value作为副作用的依赖项。

import { useEffect, useState } from ‘react‘;

function CountInputChanges() {
  const [value, setValue] = useState(‘‘);
  const [count, setCount] = useState(-1);

 useEffect(() => setCount(count + 1), [value]);
  const onChange = ({ target }) => setValue(target.value);

  return (
    <div>
 <input type="text" value={value} onChange={onChange} />
 <div>Number of changes: {count}</div>
 </div>
  );
}

添加[value]作为useEffect的依赖,这样只有当[value]发生变化时,计数状态变量才会更新。这样做可以解决无限循环。

React.useEffect() 无限循环怎么解决?

原文:https://www.cnblogs.com/crack1/p/15207642.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!