不要再向我显示带有反应挂钩的消息

Question

我有模态，当用户访问我的页面时显示，现在我希望用户能够隐藏这个模态，这样就不会再次使用本地存储或 cookie 显示模态

这是代码沙箱的现场演示：dont show me again

js代码

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Modal from "./Modal";
import useModal from "./useModal";

import "./styles.css";

const App = () => {
  const { isShowing, toggle } = useModal();
  const [cookieConsent, showCookieConsent] = useState(true);
  const [checked, setIsChecked] = useState(0);

  const handleOnchange = (e) => {
    setIsChecked(e.target.value);
  };
  let modalStorage = localStorage.setItem("hide", checked);

  useEffect(() => {
    toggle();
    if (modalStorage) {
      showCookieConsent(false);
    }
  }, []);

  const clearStorage = () => {
    localStorage.clear();
  };
  return (
    <div className="App">
      <button onClick={clearStorage}> Clear Storage</button>
      {cookieConsent === false && (
        <Modal
          isShowing={isShowing}
          handleOnchange={handleOnchange}
          hide={toggle}
        />
      )}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

现在，当我单击复选框并关闭模式并刷新页面时，它会再次显示而不是隐藏它

我做错了什么？

Answer 1

我改变了一些东西

const handleOnchange = (e) => {
    setIsChecked(e.target.checked);
    localStorage.setItem("hide", e.target.checked)
};
  
useEffect(() => {
    toggle();
    let modalStorage = localStorage.getItem("hide", checked);
    if (modalStorage) {
      showCookieConsent(false);
    }
}, []);

不要再向我显示带有反应挂钩的消息

Dont show me again message with react hooks

javascript

cookies

modal-dialog

local-storage

reactjs