javascript - useEffect 垃圾邮件请求

问题描述

状态

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当我checkIfUserIsEnabled()在下面的 useEffect 中调用 my 时，它会渲染一次并在返回方法中显示错误版本。

    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，我可以让它停止执行请求吗？

标签： javascriptreactjsreact-hooks

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

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


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

javascript - useEffect 垃圾邮件请求

问题描述

解决方案

推荐阅读