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()时，它将被渲染一次并在return方法中显示错误的版本。

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

useEffect（2th）（如果我这样做），它将不断向我的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

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

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

Answer 2

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

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


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]);

useEffect垃圾邮件请求

2 个答案: