javascript - 如何异步运行 useState

Question

const Navbar = () => {

    const [isModalOpen, setisModalOpen] = useState(true)
    const [isLogin, setisLogin] = useState(true)

    const onClose = () =>{
        setisModalOpen(false)
        if(!isLogin){
            setisLogin(true)
        }
    }
    return  (<Modal isOpen={isModalOpen} onClose={() => onClose()} >
    {!isLogin ? 
        <Register />
        :
        <Login setisLogin={() => setisLogin(false)} />
    }
    </Modal>)
}

当我调用 onclose 时，函数组件会使用登录值重新渲染一次，然后模式将关闭

使用 setTimeout 可以解决我的问题，但我认为使用 setTimeout 不是一个好的做法。

 const Navbar = () => {

    const [isModalOpen, setisModalOpen] = useState(true)
    const [isLogin, setisLogin] = useState(true)

    const onClose = () =>{
        setisModalOpen(false)
        setTimeout(() => {
            if(!isLogin){
                setisLogin(true)
            }
        }, 300);
   }
    return  (<Modal isOpen={isModalOpen} onClose={() => onClose()} >
    {!isLogin ? 
        <Register />
        :
        <Login setisLogin={() => setisLogin(false)} />
    }
    </Modal>)
}

Answer 1

有几种方法可以实现这一目标。我正在发布 useEffect 方式。

您可以使用 useEffect 并监听 isLogin(如果它发生更改，会触发 setisLogin() 函数)。

代码

const Navbar = () => {

  const [isModalOpen, setisModalOpen] = useState(true)
  const [isLogin, setisLogin] = useState(true)

  React.useEffect(() => {
     if(!isLogin){
        setisLogin(true);
     }
  },[isModalOpen])

  
  const onClose = () =>{
     setisModalOpen(false)
  }

 return  (<Modal isOpen={isModalOpen} onClose={() => onClose()} >

 {!isLogin ? 
    <Register />
    :
    <Login setisLogin={() => setisLogin(false)} />
  }
 </Modal>)
}

useState 和 setState 本质上都是异步的。