Как переключать классы в GatsbyJS зависит от cookie?

Question

Я хочу сделать простое уведомление о cookie-файлах для моей страницы хобби Gatsby без использования дополнительных пакетов cookie npm.

Я успешно установил cookie с использованием npm-пакета 'universal-cookie'.Я меняю состояние, когда нажимаю кнопку «Закрыть» баннера согласия, и он скрывает баннер.Но когда я сейчас перезагружаю свою страницу, баннер все еще отображается, хотя cookie и состояние установлены правильно (проверено с помощью console.log).

import React from 'react'
import Cookie from 'universal-cookie'

const cookie = new Cookie()

class CookieNotice extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      active: cookie.get('viewed_cookie_notice'),
    }
    this.toggleActiveClass = this.toggleActiveClass.bind(this)
  }

  componentDidMount() {
    this.setState({ active: cookie.get('viewed_cookie_notice') })
  }

  toggleActiveClass() {
    cookie.set('viewed_cookie_notice', true, { path: '/', expires: new Date(Date.now() + 2592000) })
    this.setState({ active: cookie.get('viewed_cookie_notice') })
  }

  render() {
    const { active } = this.state
    return (
      <div id="cookie-notice" className={active ? 'hidden' : null}>
          <button type="button" id="close-cookie" onClick={this.toggleActiveClass}>
            Close!
          </button>
        </div>
      </div>
    )
  }
}
export default CookieNotice

Я просто хочу навсегда скрыть баннер cookie,если пользователь закрыл баннер cookie и не показывал его ему каждый раз, когда посещает страницу.

Answer 1

В вашем конструкторе измените значение active в состоянии.

constructor(props) {
  super(props);
  this.state = { active: true };
}

При установке значения active на true это означает, что при первой загрузке компонента баннер будет скрыт, а затем, вызвав setState в componentDidMount, он получит значение cookie, а затем выполните повторную визуализацию с правильным значением.