如果用户已在React（LocalStorage）中订阅，则不再显示弹出窗口

Question

弹出窗口在1秒后出现。但是我需要通过使用localStorage将它显示给尚未订阅的用户。我确实尝试使用本地存储，如下面的代码，但是当我的时间显示/不显示弹出窗口时，我所有的都是一个空白的白页。我编码的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

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 })
   }
}

Answer 2

你在类构造函数中调用this.setState，你可以在this.state中使用一个简单的条件来直接赋值，并请在构造函数中使用bind：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>
    )
  }
}