时间戳

首页 > 解决方案 > 使用异步/等待延迟状态更改？

reactjs - 使用异步/等待延迟状态更改？

问题描述

我正在制作一个在各种情况下弹出的自定义错误窗口。我正在努力解决的问题是让窗口在 2 秒后消失。active:false由于偶数循环的工作方式（我认为？），只需一个简单的 setTimeout 即可将弹出状态更改为有点不可靠。

所以我正在尝试一种异步/等待方式来确保它总是正好 2 秒。然而，我在计时之下完成的方式似乎仍然很奇怪，有时是瞬间的，有时是 2 秒。

如何让我的removeErrorMsg函数在设置状态之前等待 2 秒？

///// App.js.js ////

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

export default class App extends Component {
  state = {
    errorPopup: {
      active: false,
      message: ''
    }
  }

  removeErrorMsg = async() => {
    await delay(2000);
    this.setState({errorPopup: {active: false, message: ''}});
  }
}



///// ErrorPopup.js ////

import React from 'react'

const ErrorPopup = ({ message, active, removeErrorMsg}) => {


  if(active){
    removeErrorMsg()
    return (
      <div className="error-popup">
        <p>{message}</p>
      </div>
    )
  } else return <div></div>
}

export default ErrorPopup

标签： reactjs

解决方案

您必须在函数内调用removeErrorMsg组件ErrorPopup内部useEffect。直接调用它会导致另一个延迟被创建，一旦父组件中的任何其他操作尝试触发重新渲染导致意外行为，它就会重置状态

const ErrorPopup = ({ message, active, removeErrorMsg}) => {
  useEffect(() => {
      if(active) {
         removeErrorMsg()
      }
   }, [active])


  if(active){
    return (
      <div className="error-popup">
        <p>{message}</p>
      </div>
    )
  } else return <div></div>
}

PS虽然不保证 setTimeout 会在 2 秒后立即执行，但或多或​​少大概会在 2 秒左右执行。

推荐阅读