如何使通知在 4 秒内出现，但在状态发生变化时避免出现

Question

我想在某些状态无效时 4 秒后显示通知消息。但是，如果在那 4 秒内它发生了变化并且现在有效 - 我想在 setTimeout 中添加条件来检查它。但问题是它仍然使用第一个状态值，而不是更改后的状态值。我修复此问题的假设之一是在同步之前在行中设置 setState，但不知道如何操作。也许还有其他方法可以修复它吗？

useEffect(async () => {
      try {
        const snippetIndexResponse = await getSnippetIndex(
            //some params
        );
        if (snippetIndexResponse !== -1) {
          setSnippetIndex(snippetIndexResponse);
        } else {
          setSnippetIndex(null)
          setTimeout(() => {
            console.log(snippetIndex) <-- it logs only first state, instead wanted null 
            if(!snippetIndex) {
              openNotificationWithIcon(
                  "error",
                  "Invalid snippet selection",
                  "Snippet slice shouldn't tear code blocks. Please, try again."
              );
            }
          }, 4000)
        }
      } catch (err) {
        setSnippetIndex(null);
        openNotificationWithIcon("error", err.name, err.message);
      }
  }, [beginRow, endRow]);

Answer 1

首先，您不能将 useEffect 回调作为异步方法调用。

其次，为了您的目的，您可以执行以下操作：

let timeoutId = null;

useEffect(() => {
  (async () => {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
try {
        const snippetIndexResponse = await getSnippetIndex(
            //some params
        );
        if (snippetIndexResponse !== -1) {
          setSnippetIndex(snippetIndexResponse);
        } else {
          setSnippetIndex(null)
          timeoutId = setTimeout(() => {
            console.log(snippetIndex) <-- it logs only first state, instead wanted null 
            if(!snippetIndex) {
              openNotificationWithIcon(
                  "error",
                  "Invalid snippet selection",
                  "Snippet slice shouldn't tear code blocks. Please, try again."
              );
            }
          }, 4000)
        }
      } catch (err) {
        setSnippetIndex(null);
        openNotificationWithIcon("error", err.name, err.message);
      }
  })();
      
  }, [beginRow, endRow]);

Answer 2

我认为您可以将通知 UI 作为一个组件并将状态作为参数传递。如果状态发生变化，组件将被销毁并重新创建。
您可以在 useEffect() 中添加 4 秒计时器，也可以在 useEffect 的“返回”中取消它。如果计时器触发，则更新一些可见性标志。

实时输入此内容 - 因此可能包含一些语法错误...

cost myAlert = (isLoading) => {
  const [isVisible, setIsVisible] = setIsVisible(false)

  useEffect(()=>{
    const timerId = setTimer, setIsVisible(true) when it goes off
    return ()=>{cancelTimer(timerId)}
  }, [isLoading, setIsVisible])

  if (!isLoading && !isVisible) return null

  if (isVisible) return (
    <> 
      // your ui
    </>
  )
}

您可能想在 setTimer 上使用 useCallback，这样如果 isLoading 更改，它不会导致 useEffect 触发 - 但我认为这应该让您接近解决方案。