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({&nbsp; &nbsp; &nbsp; startShowNum: index * 8,&nbsp; &nbsp; &nbsp; showArr: arr.slice(this.state.startShowNum, (this.state.startShowNum + 8))&nbsp; &nbsp; });修改这段代码为：this.setState({&nbsp; &nbsp; &nbsp; startShowNum: index * 8,&nbsp; &nbsp; &nbsp; showArr: arr.slice(index * 8, (index * 8 + 8))&nbsp; &nbsp; });