react如何处理只显示10条数据，点击换一批更换下一批数据

首先在reducer.js的defaultState中放入page和totalPage的默认数据

const defaultState =fromJS({
    page:1,
    totalPage:1
})

然后通过dispatch将totaolPage（总页数）传递过来

export const getList = () => {
    //返回一个对象
    return (dispatch) => {
        axios.get('./api/headerList.json').then((res) => {
            // 获取数据
            const data = res.data
            //在这里调用了changeList的方法，所以要去找到这个方法传递总页数
            dispatch(changeList(data.data))
        }).catch((res) => {
            console.log('error')
        })
    }
};
const changeList = (data) =>{
    return{
        data:fromJS(data),
        totalPage:Math.ceil(data.length/10)
    }
};

在reducer.js中将数据传递过来

if(action.type === actionTypes.GET_LIST){
	//到这里我们就可以获取总页数了
        return state.set('list',action.data).set('totalPage',action.totalPage)
  }

在index.js的mapStateToProps中获取page

const mapStateToProps = (state) =>{
    return {
        focus: state.header.get('focus'),
        list: state.header.get('list'),
        mouseIn: state.header.get('mouseIn'),
        page: state.header.get('page')
    }
}

在index.js中将固定的数据替换

getListArea() {
        const {page,list} = this.props;
        //创建一个新数组
        const pageList = [];
        //将list变为普通的js对象
        const isList = list.toJS()
        //将数据循环出来，每页只显示10条信息
        for(let i = (page-1) * 10; i<page * 10; i++){
            pageList.push(<SearchInfoItem key={isList[i]}>{isList[i]}</SearchInfoItem>)
        }
        if(this.props.focus || this.props.mouseIn) {
            return(
                <SearchInfo
                    onMouseEnter={this.props.handleMouseEnter}
                    onMouseLeave={this.props.handleMouseLeave}
                >
                    <SearchInfoTittle>
                        热门搜索
                        <SearchInfoSwitch>换一批</SearchInfoSwitch>
                    </SearchInfoTittle>
                    //这里就不需要像之前一样循环所有的数据了，只需要循环for循环的数据就可以了
                    <SearchInfoList>{pageList}</SearchInfoList>
                </SearchInfo>
            )
        }else {
            return null;
        }
    }