больше не показывать всплывающее окно, если пользователь подписался в React (LocalStorage)

Question

Всплывающее окно появляется через 1 сек. Но мне нужно показать это только пользователю, который еще не подписался, используя localStorage. Я попробовал использовать локальное хранилище, как показано ниже, но потом все, что у меня есть, это пустая белая страница, когда пришло время показывать / не показывать всплывающее окно. Является ли закодированное мной локальное хранилище полностью неверным? Пожалуйста, помогите

import React from 'react'
import styled from 'react-emotion'
import Rodal from 'rodal'
import '../styles/rodal.css'
import Delayed from '../components/Delayed'

const Signup = () => (
  <Containers>
    <SubsribtionForm
      action="https://subscribe/post?/....."
      method="post"
    >
      <SubscribeInput type="email" name="EMAIL" placeholder="Subscribe to Updates!" required />
      <Button type="submit" onClick={this.submit}>Add Me</Button>
    </SubsribtionForm>
  </Containers>
)

export default class Popup extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true }

    if (localStorage.getItem('submit')) {
      this.setState({ visible: false })
    }
    this.submits = this.submits.bind(this)
  }

  submits() {
    const newsub = this.state.submit
    localStorage.setItem('submit', newsub)
  }

  show() {
    this.setState({ visible: true })
  }

  hide() {
    this.setState({ visible: false })
  }

  render() {
    return (
      <div>
        <Container>
          <Delayed waitBeforeShow={1000}>
            <Rodal
              visible={this.state.visible}
              onClose={this.hide.bind(this)}
              width={500}
              height="100%"
              customStyles={customStyles}
            >
              <Box>
                <Banner />
                <ContainerContent>
                  <Header>Subscribe to our mailing list</Header>
                  <Words>
                    We will organize and send regular updates Stay informed!
                  </Words>
                </ContainerContent>
                <ContainerForm>
                  <Signup />
                </ContainerForm>
              </Box>
            </Rodal>
          </Delayed>
        </Container>
      </div>
    )
  }
}

Answer 1

Вы вызываете this.setState внутри конструктора класса, вы можете использовать простое условие в this.state для непосредственного присваивания значения, и, пожалуйста, используйте связывание в конструкторе: D. Я использую длину, потому что если строка равна '', длина равна 0, тогда это значение в условном выражении равно false

import React from 'react'
import styled from 'react-emotion'
import Rodal from 'rodal'
import '../styles/rodal.css'
import Delayed from '../components/Delayed'

const Signup = () => (
  <Containers>
    <SubsribtionForm
      action="https://subscribe/post?/....."
      method="post"
    >
      <SubscribeInput type="email" name="EMAIL" placeholder="Subscribe to Updates!" required />
      <Button type="submit" onClick={this.submit}>Add Me</Button>
    </SubsribtionForm>
  </Containers>
)

export default class Popup extends React.Component {
  constructor(props) {
    super(props)
    const submit = localStorage.getItem('submit')
    this.state = { visible: !submit && !submit.length }
    this.submits = this.submits.bind(this)
    this.show = this.show.bind(this)
    this.hide = this.hide.bind(this)

  }

  submits() {
    const newsub = this.state.submit
    localStorage.setItem('submit', newsub)
  }

  show() {
    this.setState({ visible: true })
  }

  hide() {
    this.setState({ visible: false })
  }

  render() {
    return (
      <div>
        <Container>
          <Delayed waitBeforeShow={1000}>
            <Rodal
              visible={this.state.visible}
              onClose={this.hide}
              width={500}
              height="100%"
              customStyles={customStyles}
            >
              <Box>
                <Banner />
                <ContainerContent>
                  <Header>Subscribe to our mailing list</Header>
                  <Words>
                    We will organize and send regular updates Stay informed!
                  </Words>
                </ContainerContent>
                <ContainerForm>
                  <Signup />
                </ContainerForm>
              </Box>
            </Rodal>
          </Delayed>
        </Container>
      </div>
    )
  }
}

Answer 2

constructor(props) {
  super(props)
  this.state = { 
    visible: !(localStorage.getItem('submit') !== '' && localStorage.getItem('submit') !== null), 
  }
  this.submits = this.submits.bind(this)
}

Просто проверьте, не является ли submit пустым, как указано выше.

Другой подход заключается в следующем в жизненном цикле componentDidMount

componentDidMount() {
   if (localStorage.getItem('submit')) {
     this.setState({ visible: false })
   }
}