react踩坑记录

一只大加号
136 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

新手react踩坑，在上手自己做第一个react项目的时候突然发现了一个报错，明明是跟着官网的步骤来进行设置的，但是只要使用了属性就会报错，功能的目的是为了实现页面的计时器功能，让页面的dom随着时间的更新进行更新，官网给出了俩种解决方案

一种是重新是通过每秒都改变整个dom的render，也就是每秒都要调用ReactDOM.render的函数进行dom刷新 当然这种每次都会更新太多的dom肯定在性能和效率上来看是不高的，所以也不是应该采用的方法

另外一种是通过每秒更新state的值，页面只负责对state进行更新，取代了原来的对整个dom中的更新，这样一来效率也就提高了，减少了太多的回流重绘，页面的性能也会提高

但是当我上手写的时候就会出现一个问题

image.png

componentDidMount(){
      this.timeId = setInterval(
        ()=>{
          this.tick()
        }
        ,1000
      )
    }

一开始我是在组件生成的时候执行函数


tick(){
      this.setState({
        date: new Date()
      });
      
    }

在函数中对state进行设置，通过定时器每秒对date属性进行更新最新的值，把当前日期设置到date中，然后再到页面中进行显示，所以在render函数中我的大概写法是这样的，但是设置之后页面就完全报错，而且还提升了最上面的报错内容，让我很疑惑，难道是我的toLocaleTimeString方法写错了吗，我的写法也都是按照官网给出的写法来模仿的，但是就是会有这种奇怪的报错，

let data = this.state.date.toLocaleTimeString()
return (
            <div className="game">
            <div className="game-board">
                <Board 
                    square={current.square}
                    onClick={(i) => this.handleClick(i)}
                />
            </div>
            <div className="game-info">
                <div>{data}</div>
                <ol>{moves}</ol>
            </div>
            </div>
        );

之后检查发现了问题，虽然我设置了state，而且也用到了state中的数据在dom上，但是还缺少了一步，那就是给state的属性设置默认值，我只是通过this.setState设置了date的值，但是在constructor中，我并没有声明this.state,这也就是为什么上面一直会有奇怪的报错了，而且报错还是toLocaleTimeString，因为我的date属性没有被真正的设置到，所以toLocaleTimeString也就没法使用

this.state = {
    // date: new Date()
}

总结

总结一点就是最近可能小程序写多了，以为setstate之后就不用对属性做默认值的设置了，react和小程序写法不同，要使用state的值要先对state进行数据的默认设置

avatar
文章
阅读
粉丝