无限循环可以通过正确管理useEffect(callback, dependencies)依赖项参数来修复。
因为我们希望count在值更改时增加,所以可以简单地将value作为副作用的依赖项。
import{ useEffect, useState }from'react';functionCountInputChanges(){const[value, setValue] = useState('');const[count, setCount] = useState(-1); useEffect(() =>setCount(count +1), [value]);constonChange =({ target }) =>setValue(target.value);return(
Number of changes: {count}
添加[value]作为useEffect的依赖,这样只有当[value]发生变化时,计数状态变量才会更新。这样做可以解决无限循环。