我有一個注冊頁面，它將在操作成功后向索引報告。到目前為止，這種通信是通過查詢引數進行的。
const Foo: React.FC = () => {
const router = useRouter() 。
const [useModal, setUseModal] = useState(false)。
const closeModal = (/span>) => {
setUseModal(false)。
};
const generateModalContent = (queryContent: ParsedUrlQuery) => {
if (Object.keys(queryContent).length !== 0) {
return {
//key-values from query[/span]。
};
}
};
const modalContent = generateModalContent(router.query) 。
if (Object.keys(modalContent! ).length !== 0 && useModal === false) {
setUseModal(true)。
}
return (
<>/span>
//不相關的東西
{useModal ? <ModalNotification {...modalContent} /> //無關的東西 {useModal ? /> : null}。
</>>
);
};
問題是，每次呼叫closeModal來關閉模態時，它都會再次顯示，因為在重新渲染時，查詢仍然存在，這個回圈將會重復。我正在尋找一種干凈的方法來顯示一次由查詢發送的資料，并且在用戶關閉模態時不會再次顯示出來。
uj5u.com熱心網友回復：
為了避免在每次重新渲染時呼叫你的那部分代碼，你必須將其包裹在一個具有正確依賴性的useEffect中，例如：
React.useEffect(() =>/span> {
const modalContent = generateModalContent(router.query) 。
if (Object.keys(modalContent! ).length !== 0 && useModal === false) {
setUseModal(true)。
}
}, [router])。
這樣，它將只在router改變時執行，而不是無限回圈。
您可以在React docs中閱讀更多資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/307910.html
標籤：