React 中的 LocalStorage 模态

Question

您好，我有一个模式，当我的应用程序检测到 Apple 设备时会弹出，加载是因为模式打开设置为 true。但是当它被加载时，localstorage 的值将是 1。如果它是 1，我将 open 设置为 false，这样当我返回那个组件时它就不会再次打开。

这是我在组件上的代码

const MasterIndexPage = () => {


const classes = useStyles()

  const [userAgent, setUserAgent] = useState('')
  const [isAndroid, setIsAndroid] = useState(false)
  const [isApple, setIsApple] = useState(false)
  const [isWindows, setIsWindows] = useState(false)

  const [open, setOpen] = useState(true)
  //   setOpen(localStorage.getItem('formModal') == 1)

  const handleClose = () => {
    setOpen(false)
  }

  const visible = localStorage.getItem('formModal')

  if (!visible) {
    localStorage.setItem('formModal', 1)
    setOpen(true)
    console.log('first load')
  }
  if (visible) {
    // setOpen(false) // when I uncomment this I'm getting an error
    console.log('second load')
  }

  useEffect(() => {
    if (navigator.userAgent.match(/Android/i)) {
      setIsAndroid(true)
    } else if (navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
      setIsApple(true)
    } else {
      return null
    }
  }, [])

  return (

<h1>Hello</h1>
        <div>
          {isApple ? (
            <Modal
              aria-labelledby="transition-modal-title"
              aria-describedby="transition-modal-description"
              className={`${classes.modal}`}
              open={open}
              onClose={handleClose}
              closeAfterTransition
              BackdropComponent={Backdrop}
              BackdropProps={{
                timeout: 500,
              }}
            >
              <div id="popup">
                <h4 className="h4_addtohome">Add my App!</h4>
                <p className="p__addtohome">
                  Tap below to add an icon to your home screen for quick access!
                </p>
              </div>
            </Modal>
          ) : null}
        </div>
  )
}

export default MasterIndexPage

我正在实现，如果它检测到一个苹果设备，它将弹出，然后如果用户关闭它不会再次弹出，除非它清除缓存

当我启用 setOpen(false) 时出现此错误

Answer 1

您正在根据从本地存储读取的 visible 标志做出决定。所以你可以把它作为你的 useEffect 的依赖。

const visible = localStorage.getItem("formModal");

useEffect(() => {
  if (!visible) {
    localStorage.setItem("formModal", 1);
    setOpen(true);
    console.log("first load");
  }
  if (visible) {
    // setOpen(false) // when I uncomment this I'm getting an error
    console.log("second load");
  }
}, [visible]);

React 中的 LocalStorage 模态

LocalStorage modal in React

local-storage

reactjs

react-hooks