react里点击方法效果实现延迟

Question

下面是一个简单的分页功能：pagination.jsxrender() {        return (            <div className="pagination">                <span className=" tab prev">《</span>                {                    this.props.tabArr.map((item, index) => {                        return (                            <span key={index} className="tab" data-index={index} onClick={this.props.tabClick.bind(this,index)}>{index + 1}</span>                        );                    })                }                <span className="next">next ></span>            </div>        );    }index.jsx//import pagination.jsx tabClick(num) {    // const index = e.target.getAttribute('data-index');    const index =num;    console.log(index);      const arr = this.state.allDataArr;    this.setState({      startShowNum: index * 8,      showArr: arr.slice(this.state.startShowNum, (this.state.startShowNum + 8))    });  }问题：为什么tabClick方法里的index是跟着我点击时改变的，但是showArr（要展示的数组）却要延迟，当我点击第二次才会生效？

Answer 1

问题就是setState是异步的。

this.setState({

      startShowNum: index * 8,

      showArr: arr.slice(this.state.startShowNum, (this.state.startShowNum + 8))

    });

修改这段代码为：

this.setState({

      startShowNum: index * 8,

      showArr: arr.slice(index * 8, (index * 8 + 8))

    });