第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

組件未使用“useEffect”掛鉤在 React 中重新渲染

組件未使用“useEffect”掛鉤在 React 中重新渲染

有只小跳蛙 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]);


查看完整回答
反對 回復 2022-06-09
  • 1 回答
  • 0 關注
  • 228 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號