如何使用 React hooks 或其他方式使组件（弹出模式）仅出现一次（React/Next js）

Question

我想让弹出模式每次访问仅出现一次（我不希望每次有人返回索引页面时都出现它）。有没有办法使用钩子来做到这一点，或者有更好的方法吗？

 export default function Popup() {
        const [visible, setVisible] = React.useState(true);

        if(!visible) return null;

        return (
            <div className={styles.popup} onClick={() => setVisible(false)}>
                {/* <div className={styles.popupInner}> */}
                <div className={styles.popupInner}>
                    <div className={styles.buttonContainer}><Button color="danger" className={styles.button}>Okay</Button></div>
                </div>    
                {/* </div> */}
            </div>
        )
    }

Answer 1

你可以使用localstorage and useEffecthook

为什么是本地存储？

使用钩子可以达到相同的结果useContext。但在刷新时。Hooks 不保存之前的值。所以最好用来localstorage存储弹出状态

export default function Popup() {
        const [visible, setVisible] = React.useState(false);
        useEffect(()=>{
          let pop_status = localStorage.getItem('pop_status');
          if(!pop_status){
            setVisible(true);
            localStorage.setItem('pop_status',1);
          }
        },[])
        if(!visible) return null;

        return (
            <div className={styles.popup} onClick={() => setVisible(false)}>
                {/* <div className={styles.popupInner}> */}
                <div className={styles.popupInner}>
                    <div className={styles.buttonContainer}><Button color="danger" className={styles.button}>Okay</Button></div>
                </div>    
                {/* </div> */}
            </div>
        )
    }