組件不會使用“useEffect”鈎子在 React 中重新渲染

Question

我正在創建一個彈出模式，它應該只出現在用戶第一次訪問網站時。 為此，我使用 useEffect 鈎子來做兩件事：1.) 檢查是否已經設置了 cookie，（如果沒有，它將設置 cookie）2.) 基於該檢查，更新isCookie 狀態為真/假。

然后我將 isCookie 狀態值作為道具傳遞給模態組件，該組件將使用 isCookie 狀態來確定是否顯示模態。

問題是：模態僅基於 useState 初始值進行渲染。 即使在 useEffect 中更新了狀態，模態也不會重新渲染。 我可以通過控制台日志確認狀態正在更新，但我不知道如何讓模態重新渲染。

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}/>

彈窗/模態組件的相關部分：

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)
    }

Answer 1

useEffect確實使用狀態更改重新渲染模態，但重新渲染不會重置其中渲染的組件的狀態變量（如果您想到帶有受控組件的表單，那將是可怕的。）只有重新安裝才能做到這一點.

因此，當您將 modal 設置為useState(intialModalState) ，它將始終依賴於它接收到的初始 prop 而沒有其他任何東西。

要在重新渲染發生時將 prop 同步到 state，您需要在 child 中使用useEffect來監聽 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]);