Question

我有一个具体案例。我要做的第一件事是请求Index.DB。从中获得taskId之后，我需要每5秒开始询问服务器。并停止在特定标志上执行此操作。我该如何用挂钩正确地做到这一点？

我试图像这样使用useInterval钩子： https://github.com/donavon/use-interval; 但是当我在useEffect中设置它时，会导致一致的错误：

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

const Page = () => {
    const [task, setTask] = useState({})

    const isLoaded = (task.status === 'fatal');

    const getTask = (uuid: string) => {
        fetch(`${TASK_REQUEST_URL}${uuid}`)
            .then(res => {
                return res.json();
            })
            .then(json => {
                        setTask(json.status)
            })
            .catch(error => console.error(error));
    };
    useEffect(() => {
        Storage.get('taskId')
         .then(taskId => {
             if (!taskId) {
             Router.push('/');
          }
         useInterval(() => getTask(taskId), 5000, isTaskStatusEqualsSomthing)
         })
    }, []);


    return (
        <p>view</p>
    );
};

我也试图像这样玩本机setInterval

    useEffect(() => {
        Storage.get('taskId')
         .then(taskId => {
             if (!taskId) {
             Router.push('/');
          }
         setInterval(() => getTask(taskId), 5000)
         })

    }, []);

但是在这种情况下，我不知道如何清除interval，代码也不干净。

Answer 1

解决方案很简单。您只需要在.then回调中配置setInterval，例如

useEffect(() => {
    let timer;
    Storage.get('taskId')
     .then(taskId => {
         if (!taskId) {
            Router.push('/');
         else {
            timer = setInterval(() => getTask(taskId), 5000)
         }
      }

     })
     return () => {clearInterval(timer)}
}, []);

第一种方法对您不起作用的原因是，因为您无法像对useInterval所做的那样有条件地或在useEffect中调用钩子

标志后每N秒请求服务器一次

1 个答案: