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

Question

下面是一个简单的分页功能：

pagination.jsx

render() {
        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))
    });