Question

我在项目中使用了 react。当用户刷新时模态关闭，但我想修改它以便它不会关闭。我发现了 'beforeunload' 事件，但我想防止出现 'alert'。当我刷新时，我想保留从 API 收到的数据并维护模型。我想只有按下关闭按钮才关闭模态，请问可以用什么方法？

这不是真正的代码。只是一个例子...

function Modal() {
  const [open, setOpen] = useState(false)

  const handleOpen = () => {
    setOpen(!open);
  }

  return (
    <Modal>
      <button onClick={handleOpen}>
      modal
     </button>
     (some data from API)
    </Modal>
  )
}

Answer 1

首先读取 localStorage 值，如果存在则使用它，然后每次设置新值时也将其更新到本地存储中。

记住 localstorage 只将值保存为 string；当它不存在时，它将作为 null 返回。

function Modal() {
  const [open, setOpen] = useState(JSON.parse(localStorage.getItem("open")) || false)

  const handleOpen = () => {
    setOpen((prevState) => {
      localStorage.setItem("open", !prevState);
      return !prevState;
    });
  }

  return (
    <Modal>
      <button onClick={handleOpen}>
      modal
     </button>
    </Modal>
  )
}

页面刷新反应时如何保持状态？

1 个答案: