Question

我正在制作一个自定义错误窗口，该窗口会在各种情况下弹出。我正在苦苦挣扎的是让窗口在2秒钟后消失。.由于even循环的工作方式（我认为？），仅通过简单的setTimeout将弹出状态更改为active:false有点不可靠。

因此，我正在尝试采用异步/等待方式来确保始终始终为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

Answer 1

您必须在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>
}

P.S。。虽然没有保证setTimeout将在2秒后立即执行，但它大致在2秒左右执行。

通过异步/等待来延迟状态更改？

1 个答案: