在呈现中响应useState不更改值

Question

我有一个用于PWA的带有customButton的组件：

const PWA = () => {
  const [supportsPWA, setSupportsPWA] = useState(false)
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  useEffect(() => {
    const handler = e => {
      e.preventDefault()
      setDeferredPrompt(e)
      setSupportsPWA(true)
    }
    window.addEventListener('beforeinstallprompt', handler)

    return () =>
      window.removeEventListener('beforeinstallprompt', handler)
  }, [])

  return (
    <>
      {supportsPWA.toString()}
      {console.log(supportsPWA)}
      {supportsPWA && <div>test</div>}
    </>
  )
}
export default PWA

我有beforeinstallprompt，我将supportsPWA状态从false更改为true。在渲染中，我有supportsPWA.toString()，它总是false。控制台日志返回me：false和next true，所以如果supportsPWA是true，为什么不反应呈现div test

编辑：

我发现问题出在哪里。我在另一个组件中呈现PWA组件：{showMobileMenu && (<PWA />)}。showMobileMenu i按按钮更改(从false更改为true )，这里有问题。当我删除showMobileMenu && ...并且只有<PWA />时，div测试将正确呈现。但我不知道我怎么能解决这个问题？

Answer 1

在您的情况下，如果可以接受，而不是每次在PWA组件中显示/隐藏内容，就执行{showMobileMenu && (<PWA />)} (卸载和挂载您的组件)：

const PWA = ({ showPWAComponent }) => {
  const [supportsPWA, setSupportsPWA] = useState(false)
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  useEffect(() => {
    const handler = e => {
      e.preventDefault()
      setDeferredPrompt(e)
      setSupportsPWA(true)
    }
    window.addEventListener('beforeinstallprompt', handler)

    return () =>
      window.removeEventListener('beforeinstallprompt', handler)
  }, [])

  return showPWAComponent && (
    <div>
      {supportsPWA.toString()}
      {console.log(supportsPWA)}
      {supportsPWA && <div>test</div>}
    </div>
  )
}
export default PWA

在使用PWA go的另一个组件中：

{<PWA showPWAComponent={showMobileMenu} />)}

在任何其他情况下，您所拥有的这种情况不会完全工作，因为您已经删除了那里的组件。