Reactjs 如果用户已订阅React（本地存储），则不再显示弹出窗口

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

从“React”导入React
导入样式来自“反应情绪”
从“Rodal”导入Rodal
导入“../styles/rodal.css”
从“../components/Delayed”导入延迟
常量注册=（）=>(
加我
)
导出默认类弹出窗口扩展React.Component{
建造师（道具）{
超级（道具）
this.state={visible:true}
if（localStorage.getItem（'submit'））{
this.setState（{visible:false}）
}
this.submits=this.submits.bind（this）
}
提交（）{
const newsub=this.state.submit
localStorage.setItem（'submit'，newsub）
}
show（）{
this.setState（{visible:true}）
}
隐藏（）{
this.setState（{visible:false}）
}
render（）{
返回(
订阅我们的邮件列表
我们将定期组织和发送更新，并随时通知您！
)
}
}

只需检查

submit

是否不是空的，如上所述

另一种方法是在componentDidMount生命周期中执行以下操作

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

---

您正在类构造函数内调用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>
    )
  }
}

从“React”导入React
导入样式来自“反应情绪”
从“Rodal”导入Rodal
导入“../styles/rodal.css”
从“../components/Delayed”导入延迟
常量注册=（）=>(
加我
)
导出默认类弹出窗口扩展React.Component{
建造师（道具）{
超级（道具）
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）
}
提交（）{
const newsub=this.state.submit
localStorage.setItem（'submit'，newsub）
}
show（）{
this.setState（{visible:true}）
}
隐藏（）{
this.setState（{visible:false}）
}
render（）{
返回(
订阅我们的邮件列表
我们将定期组织和发送更新，并随时通知您！
)
}
}

不要在构造函数中调用

this.setState

，只需正确初始化

this.state

构造函数（props）{super（props）this.state={visible:true}if（localStorage.getItem（'submit'）{this.state（{visible:false}}}）this.submits=this.submits.bind（this）}它没有改变任何东西：（我想知道为什么它仍然不起作用。onClick={this.submit}我想这可能是原因之一，还有其他原因。有什么办法可以做到这一点吗？使用cookies？我想知道怎么做

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