当应用程序状态更改时,React Fullpage TypeError未定义

时间:2019-08-30 15:53:22

标签: javascript reactjs

当状态在React应用程序中发生变化(主要是通过onClick事件)时,React整页包会为以下滚动事件引发TypeError,从而导致性能大幅下降。

我尝试了多种方法来将状态更改绑定到click事件,但是每种方法都会引发相同的错误。我还尝试了在多种配置中使用“全页”,每种配置都导致相同的问题。

file1.csv

这应该只更改我要的状态。相反,我得到

<ReactFullpage
    scrollBar
    licenseKey={'YOUR_KEY_HERE'}
    scrollingSpeed={500}
    render={comp => (
        <Fragment>
            <ReactFullpage.Wrapper>
                <div className={this.state.toggle ? "overlay section" : "section">
                    <div onClick={() => this.setState({toggle: !this.state.toggle})}>Toggle state</div>
                 </div>
             </ReactFullpage.Wrapper>
         </Fragment>
     )}
/>

会在状态更改后的每个滚动事件中发生,从而导致控制台中充满错误,并且程序包本身使该应用程序无法使用。

如果有人对如何解决此问题或提供类似功能的任何其他软件包有任何想法,那么我将不知所措。谢谢

2 个答案:

答案 0 :(得分:2)

我认为您在这里遇到的问题是您在做

 this.setState(toggle: !this.state.toggle)

我相信您想做的是

 this.setState({toggle: !this.state.toggle})

因为React状态实际上是一个对象。 但是,由于组件中不存在 e ,因此应用程序中可能还会存在其他问题。

答案 1 :(得分:0)

问题已解决,状态更改导致“ section”类被覆盖,从而导致整个页面出现故障。 @ https://codesandbox.io/s/recursing-lumiere-h50zs的证明,如果有人有其他想法,我很乐意听到。