React操作失误笔记


前言

一些我在学习React里的操作失误


问题

1.未绑定就引用有this的函数

TypeError: Cannot read property ‘timer’ of undefined
在这里插入图片描述
以下是使用onMouseOut引用out函数

<div className="big" onMouseOut={this.out} onMouseOver={this.over}>

问题:未使用bind绑定事件,修改方法(1)如下

<div className="big" onMouseOut={this.out.bind(this)} onMouseOver={this.over.bind(this)}>

修改方法(2)在constructor内绑定

this.out = this.out.bind(this);
this.over = this.over.bind(this);

2.引用方法错误

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
在这里插入图片描述

在render()内创建的元素,如果需要修改属性的值,那么里面添加的应该是方法(函数)而不是直接修改,修改方法(创建函数然后引用函数)如下

<div className="spot" onClick={() => {this.setState({No: 3})}} > 4 </div>
<div className="spot" onClick={() => {this.setState({No: 2})}} > 3 </div>
<div className="spot" onClick={() => {this.setState({No: 1})}} > 2 </div>
<div className="spot" onClick={() => {this.setState({No: 0})}} > 1 </div>

3.setState的异步与回调函数解决

在处理按钮点击事件的处理上往往会遇到这么个问题

<div className="spot" onClick={() => {this.setState({No: 3, left: this.state.No*width})}} > 4 </div>
<div className="spot" onClick={() => {this.setState({No: 2, left: this.state.No*width})}} > 3 </div>
<div className="spot" onClick={() => {this.setState({No: 1, left: this.state.No*width})}} > 2 </div>
<div className="spot" onClick={() => {this.setState({No: 0, left: this.state.No*width})}} > 1 </div>

这里运用setState更新No的值然后再引用,结果就是并没有更新。
因为setState是异步的,当渲染结束后才会再次更新,因此同时传参只能传上一步的值。

解决方法:这里可以运用回调函数,根据另外设的新函数,然后将No的参数传入,然后使用回调函数引用,此时在新函数内No的值就可以使用传入的数字

<div className="spot" onClick={(event) => {
                        this.spot(3)
                    }} > 4 </div>
<div className="spot" onClick={(event) => {
                        this.spot(2)
                    }} > 3 </div>
<div className="spot" onClick={(event) => {
                        this.spot(1)
                    }} > 2 </div>
<div className="spot" onClick={(event) => {
                        this.spot(0)
                    }} > 1 </div>

以下是spot函数内容:

spot(No){
    this.setState({
        No: No,
        left: No* width
    })
}

总结

持续更新中,多出错多总结

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页