useEffect垃圾邮件请求

Question

状态

const [user, setUser] = useState({});

checkIfUserIsEnabled((

async function checkIfUserIsEnabled() {
const res = await fetch("http://localhost:8080/users/finduserbytoken?id=" + 
getTokenIdFromURL);
res.json()
.then(res => setUser(res))
.catch(err => setErrors(err));
}

useEffect当我在下面的useEffect中调用checkIfUserIsEnabled()时，它会被渲染一次，并在返回方法中显示错误版本。

useEffect(() => {
verifyEmail(getTokenIdFromURL);
checkIfUserIsEnabled();
return () => {
/* cleanup */
};
}, [/* input */])`

使用效果(第2个(如果我这样做，它会不断向我的API发送请求，并显示true。

useEffect(() => {
checkIfUserIsEnabled();
});

返回

return (
<div className="emailVerificationWrapper">
{user.enabled 
? <h1>Thank you for registrating, {user.firstName}. Account is verified!</h1> 
: <h1>Attempting to verify account...</h1>}
</div>
)

对于我的问题：为什么第二个useEffect会垃圾邮件发送请求？有没有一种方法可以让请求每隔2-3秒呈现一次，而不是垃圾邮件？一旦它真的返回true，我能让它停止执行请求吗？

Answer 1

效果挂钩在组件安装时运行，也在组件更新时运行。因为我们在每次获取数据后都会设置状态，所以组件会更新，效果会再次运行。

它一次又一次地获取数据。这是一个错误，需要避免。我们只想在组件安装时获取数据。这就是为什么您可以提供一个空数组(或不变的东西(作为效果挂钩的第二个参数，以避免在组件更新时(或仅当参数更改时(激活它，而仅用于组件的安装。

let URL = `http://localhost:8080/users/finduserbytoken?id=`;
async function checkIfUserIsEnabled() {
const res = await fetch(`$(URL)` + 
getTokenIdFromURL);
res.json()
.then(res => {setUser(res); return Promise.resolve()})
.catch(err =>  {setErrors(err); return Promise.reject()});
}

useEffect(() => {
const abortController = new AbortController();
const fetchData = async() => await checkIfUserIsEnabled();
fetchData();
return () => {
abortController.abort();
};
}, [URL]);

Answer 2

useEffect(() => {
checkIfUserIsEnabled();
}); <-- no dependency

由于useEffect没有任何依赖关系，它将在每次渲染时运行，因此每次更改某些状态并重新渲染组件时，它都会发送请求。