组件未使用“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 同步到 state，您需要useEffect在 child 内部监听 prop 更改：const initialModalState = props.cookie ? {open: false} : {open: data.markdownRemark.frontmatter.show}const [modal, setModal] = useState(initialModalState)useEffect(() => {&nbsp; setModal(props.cookie ? {open: false} : {open: data.markdownRemark.frontmatter.show})}, [props.cookie]);