Компонент не выполняет рендеринг в React с использованием хука 'useEffect' - PullRequest
Новая
       77

Компонент не выполняет рендеринг в React с использованием хука 'useEffect'

1 голос
/ 01 апреля 2020

Я создаю модальное всплывающее окно, которое должно появляться только при первом посещении пользователем веб-сайта. Чтобы сделать это, я использую ловушку useEffect, чтобы сделать две вещи: 1.) Проверить, был ли уже установлен повар ie (если он не установлен, будет установлен повар ie) 2.) На основе в этой проверке измените состояние isCook ie на true / false.

Затем я передаю значение состояния isCook ie в качестве реквизита модальному компоненту, который будет использовать isCook ie состояние, чтобы определить, показывать ли модальное.

Вот в чем проблема: модальное отображение выполняется только на основе начального значения useState. Даже после того, как состояние было обновлено в useEffect, модальное изображение не рендерится повторно. Я могу подтвердить, что состояние обновляется через консольные журналы, но я не могу понять, как заставить модал перерисовать.

Повар ie проверка и размещение в 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}/>

Соответствующая часть всплывающего / модального компонента: 

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 Ответ

2 голосов
/ 01 апреля 2020

useEffect выполняет повторную визуализацию модальной модели с изменением состояния, но повторная визуализация не сбрасывает переменные состояния для компонента, отображаемого внутри него (это было бы ужасно, если вы подумаете о форме с управляемым компонентом). Только перемонтирование может сделать это.

Следовательно, когда вы устанавливаете модальное значение useState(intialModalState), оно всегда будет зависеть от первоначальной пропы, которую он получает, и ничего больше.

Чтобы синхронизировать c информацию о состоянии, когда происходит повторный рендеринг, вам нужно useEffect внутри дочернего элемента, который слушает изменение структуры: 

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