如何与应该显示一次通知的页面进行通信？答案

【问题标题】：How to communicate back to a page it should display a notification once?如何与应该显示一次通知的页面进行通信？
【发布时间】：2021-09-16 21:19:09
【问题描述】：

我有一个注册页面，当操作成功时会向索引报告。目前，通信是通过查询参数进行的。

const Foo: React.FC = () => {
    const router = useRouter();
    const [useModal, setUseModal] = useState(false);

    const closeModal = () => {
        setUseModal(false);
    };

    const generateModalContent = (queryContent: ParsedUrlQuery) => {
        if (Object.keys(queryContent).length !== 0) {
            return {
                //key-values from query
            };
        }
    };
    const modalContent = generateModalContent(router.query);

    if (Object.keys(modalContent!).length !== 0 && useModal === false) {
        setUseModal(true);
    }

    return (
        <>
            //unrelated stuff
            {useModal ? <ModalNotification {...modalContent} /> : null}
        </>
    );
};

问题是每次调用closeModal 来关闭模式时，它都会再次显示，因为在重新渲染时，查询仍然存在并且循环将重复。我正在寻找一种干净的方式来显示查询发送的数据一次，并且在用户关闭模式后它不会再次显示。

【问题讨论】：

标签： javascript reactjs typescript next.js

【解决方案1】：

为避免在每次重新渲染时调用您的代码部分，您必须将其包装在具有正确依赖关系的 useEffect 中，如下所示：

React.useEffect(() => {
    const modalContent = generateModalContent(router.query);

    if (Object.keys(modalContent!).length !== 0 && useModal === false) {
        setUseModal(true);
    }
}, [router]);

这样它只会在router发生变化时执行，而不是无限循环。

您可以在React docs 中了解更多信息。

【讨论】：