组件未使用 'useEffect' 挂钩在 React 中重新呈现

Question

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

然后我将 isCookie 状态值作为 prop 传递给模态组件，模态组件将使用 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}/>

pop-up/modal组件的相关部分：

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 确实 re-render 状态改变的模态，但是 re-rendering 不会重置其中呈现的组件的状态变量（如果你认为那会很糟糕具有受控组件的形式。）只有重新安装才能做到这一点。

因此，当您将模态设置为 useState(intialModalState) 时，它将始终依赖于它收到的初始 prop，而不是其他任何东西。

要在 re-rendering 发生时将 prop 同步到状态，您需要 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]);

组件未使用 'useEffect' 挂钩在 React 中重新呈现

Component not re-rendering in React using a 'useEffect' hook

javascript

reactjs

gatsby

react-hooks

use-effect