分派函数的中断 if 语句 - TypeScript，ReactJS

Question

一点上下文。 我有一个dispatch 函数触发我的GET axios 调用以获取进度条的状态。 到目前为止它工作正常，但问题是即使状态为 finished ，该功能也会继续。有人可以给我一个建议我该怎么办吗？这是我使用的部分代码

  const [responseId] = useState(response.data.id)

  const [processed, setProcessed] = useState(0);
  const [total, setTotal] = useState(0);
  const [status, setStatus] = useState('');


        if (responseId) {
          dispatch(fetchStatus(responseId));
        if (status === 'finished') {
          console.log('finished');
          return;
    }
  }

  useEffect(() => {
    if (statusProgress) {
      setProcessed(statusProgress.processed);
      setTotal(statusProgress.total);
      setStatus(statusProgress.status);
    }
  }, [statusProgress]);

我尝试了嵌套IF或IF ELSE，但效果是一样的。

Answer 1

您可以继续获取数据，直到status !== 'finished'。比如：

useEffect(() => {
  if (responseId && status !== 'finished') {
     dispatch(fetchStatus(responseId));
  }
  else if(status === 'finished') {
     console.log('finished');
  }
}, [responseId, status]);

每次status 和/或responseId 更改值时都会执行此useEffect。

我使用了useEffect，因为我总是避免直接在组件的主体中编写代码（因为无法知道代码将执行多少次以及何时执行）。