鍍金池/ 問答/HTML/ react里點(diǎn)擊方法效果實(shí)現(xiàn)延遲

react里點(diǎn)擊方法效果實(shí)現(xiàn)延遲

下面是一個(gè)簡(jiǎn)單的分頁功能：

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是跟著我點(diǎn)擊時(shí)改變的，但是showArr（要展示的數(shù)組）卻要延遲，當(dāng)我點(diǎn)擊第二次才會(huì)生效？

回答
編輯回答
亮瞎她

問題就是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))
    });
2018年7月14日 19:12