React 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。控制台日志返回我：false 和下一个 true，所以如果 supportsPWA 是 true 为什么 React 不渲染 div test？

编辑：

我发现问题出在哪里。我在另一个组件中渲染 PWA 组件：{showMobileMenu && (<PWA />)}。 showMobileMenu 我通过按钮更改（从 false 到 true ），这是问题所在。当我删除 showMobileMenu && ... 而我只有 <PWA /> 时，div 测试会正确呈现。但是不知道怎么解决？

Answer 1

好吧，在你的情况下，而不是 {showMobileMenu && (<PWA />)} 每次卸载和安装你的组件，只要在你的 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 的另一个组件中：

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

在任何其他情况下，您所拥有的这种情况将无法正常工作，因为您在那里删除了组件。