有只小跳蛙
2022-06-09 11:07:12
我正在創(chuàng)建一個僅應在用戶首次訪問網站時出現的彈出模式。為此,我使用 useEffect 鉤子來做兩件事:1.)檢查是否已經設置了 cookie,(如果沒有,它將設置 cookie)2.)基于該檢查,更新isCookie 狀態(tài)為真/假。然后我將 isCookie 狀態(tài)值作為道具傳遞給模態(tài)組件,它將使用 isCookie 狀態(tài)來確定是否顯示模態(tài)。這是問題所在:模態(tài)僅基于 useState 初始值進行渲染。即使在 useEffect 中更新了狀態(tài)后,模態(tài)也不會重新渲染。我可以通過控制臺日志確認狀態(tài)正在更新,但我不知道如何讓模式重新渲染。useEffect 中的 cookie 檢查和放置:const [cookie, setCookie] = useState({isCookie:true}) const newCookie = "visited=true; max-age=604800"; useEffect(() => { if (!document.cookie.split(';').some((item) => item.trim().startsWith('visited='))) { //check to see if a cookie has been placed, if not this is a 'first visit' setCookie({isCookie:false}); document.cookie = newCookie; //place cookie on first visit } }, []) <PopUp cookie={cookie.isCookie}/>彈出/模態(tài)組件的相關部分:const PopUp = (props) => {/*if a cookie is present, the initial state of the modal is hidden, otherwise it's set to 'open' or shown*/ const initialModalState = props.cookie ? {open: false} : {open: data.markdownRemark.frontmatter.show} const [modal, setModal] = useState(initialModalState) }
1 回答

蝴蝶刀刀
TA貢獻1801條經驗 獲得超8個贊
useEffect確實會通過狀態(tài)更改重新渲染模式,但重新渲染不會重置其中呈現的組件的狀態(tài)變量(如果您想到帶有受控組件的表單,那將是可怕的。)只有重新安裝才能做到這一點。
因此,當您將 modal 設置為 時useState(intialModalState),它將始終依賴于它接收到的初始道具,而不是其他任何東西。
要在重新渲染發(fā)生時將 prop 同步到 state,您需要useEffect在 child 內部監(jiān)聽 prop 更改:
const initialModalState = props.cookie ? {open: false} : {open: data.markdownRemark.frontmatter.show}
const [modal, setModal] = useState(initialModalState)
useEffect(() => {
setModal(props.cookie ? {open: false} : {open: data.markdownRemark.frontmatter.show})
}, [props.cookie]);
添加回答
舉報
0/150
提交
取消