Javascript 使用'；使用效果'；钩

我正在创建一个弹出模式，它应该只出现在用户第一次访问网站时。为此，我使用useEffect钩子做了两件事：1）检查cookie是否已经设置（如果没有设置，它将设置cookie）2）基于该检查，将isCookie状态更新为true/false

然后我将isCookie状态值作为道具传递给模态组件，模态组件将使用isCookie状态来确定是否显示模态

问题在于：模式仅基于useState初始值进行渲染。即使在useEffect中更新了状态，模态也不会重新渲染。我可以通过控制台日志确认状态正在更新，但我不知道如何使模式重新渲染

cookie检查和放置在useEffect中：

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

---

useffect

会使用状态更改重新呈现模态，但重新呈现不会重置其中呈现的组件的状态变量（如果您想到一个带有受控组件的窗体，这将非常糟糕）。只有重新安装才能做到这一点

因此，当您将模态设置为

useState（intialModalState）

时，它将始终依赖于它接收的初始道具，而不依赖于其他任何东西

要在重新渲染时将道具同步到状态，您需要在侦听道具更改的子级中使用

useffect

：

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]);

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]);