如何延迟 React

Question

当您点击按钮时，会呈现另一个屏幕：

<button className="button _button_two_column" onClick={()=> dispatch({type: "NEXT_SCREEN"})}>

if (action.type === 'NEXT_SCREEN') {
        return {
            ...state,
            currentScreenIndex: state.currentScreenIndex + 1,
        }
    }

/当 currentScreenIndex 加 1 时屏幕改变/

我需要在按下按钮时屏幕 1 打开 3 秒，然后屏幕 2 怎么做？我尝试使用 setTimeout 来做到这一点，但什么也没发生

Answer 1

我相信您正在使用 useReducer 钩子。您可以在 setInterval 的回调中执行 dispatch。您还需要小心处理内存泄漏。

这样试试：

将以下挂钩添加到您的组件。 trigger 是触发屏幕转换。我们只调用 setInterval 一次（使用 if check）以避免内存泄漏并在组件卸载时清除它。

  const [trigger, setTrigger] = useState(false);

  useEffect(() => {
    let interval;
    if (trigger) {
      interval = setInterval(() => dispatch({ type: "NEXT_SCREEN" }), 3000);
    }
    return () => clearInterval(interval);
  }, [trigger]);

当按钮点击发生时将触发器更改为真

<button
  className="button _button_two_column"
  onClick={() => setTrigger(true)}
></button>

演示代码：

Answer 2

我建议使用setTimeout() 函数进行延迟。并避免在 html.

中使用 javascript 函数

const onClick = () => {
    setTimeout(dispatch({type: "NEXT_SCREEN"}), 1000)
}
<button className="button _button_two_column" onClick={onClick}>

Answer 3

我的任务的解决方案：

useEffect(() => {
  let interval;
  if (stateScreen.currentScreenIndex===4) {
    interval = setInterval(() => dispatch({ type: "NEXT_SCREEN" }), 2000);
  }
  return () => clearInterval(interval);
}, );

如何延迟 React

How to make a delay in React

reactjs

delay

use-reducer