Question

这是我的useEffect代码块：

useEffect(() => {
    const checkNextEmailTime = async () => {
      const result = await agent.ContactCustomer.nextEmailTime();

      const now = new Date();
      const change = new Date(result);

      if(change > now) {
        setNextEmail(dateFormat(result, 'h:MM TT'));
        setEmailPendingWarning(true);
      } else {
        setNextEmail('');
        setEmailPendingWarning(false);
      }

      setTimeout(checkNextEmailTime, 60000);
    }

    checkNextEmailTime();
  }, [])

我希望这只会每60秒对我的服务器执行一次ping操作，但是我看到的是它将向服务器发出请求，等待60秒，再次请求，然后大约10秒后，我看到另一个请求进入然后每60秒重复一次。

据我所知，此功能组件仅加载一次。

有什么想法吗？

谢谢！

Answer 1

尝试创建新功能并将setTimeout删除，然后添加useState

const [reload,setReload] = useState(false)

调用此函数并使其更改状态setReload(!reload)，并使useEffect的依存性为reload，因此现在每60秒更改一次状态并调用useEffect

const [reload,setReload] = useState(false)
useEffect(()=>{
checkNextEmailTime();

},[reload])

const checkNextEmailTime = ()=>{
// your code
...

setReload(!reload)
setTimeout(checkNextEmailTime, 60000);

}

希望对您有帮助

Answer 2

在@Ahmed留下的足迹之后，我做了一些调整，并以此为解决方案：

const checkNextEmailTime = useCallback(async () => {
    const result = await agent.ContactCustomer.nextEmailTime();

    const now = new Date();
    const change = new Date(result);

    if(change > now) {
      setNextEmail(dateFormat(result, 'h:MM TT'));
      setEmailPendingWarning(true);
    } else {
      setNextEmail('');
      setEmailPendingWarning(false);
    }

    setTimeout(checkNextEmailTime, 60000);
}, []);

useEffect(() => {
    checkNextEmailTime();
}, [checkNextEmailTime])

我不需要创建一个重载useState变量。感谢您的帮助！

useEffect即使依赖列表为空，也多次渲染

2 个答案: