Prev / Next的多维集合

Question

我正在研究教育系统。试图显示问题和主题的页面。因此，我添加前进/后退按钮。下一步按钮有效，但我的后退按钮有问题。第一个问题，然后是主题页面。

像这样的结构

var lessons = [
    {
    successPercent : false,
    subject : {
      id      : 1,
      title : "Subject 1",
      pages : [
          {
              id : 1,
              title : "Page 1"
          },
          {
              id : 2,
              title : "Page 2"
          }
      ]
  }
},
{
    successPercent : false,
    subject : {
      id      : 2,
      title : "Subject 2",
      pages : [{
          id : 3,
          title : "Page 3"
      }]
  }
}];

下一个场景

  

第1课＆gt;第1页＆gt;第2页＆gt;第2课＆gt;第3页

上一个场景

  

第1课＆lt;第1页＆lt;第2页＆lt;第2课＆lt;第3页

查找收藏集

_findKey(list, id, isSubject = true) {
    if(isSubject){
        return _.findKey(list, ["subject.id", id]);
    } else {
        return _.findKey(list, ["id", id]);
    }
}

获取以前的数据

_getPrevData(list, key){
    var keys = Object.keys(list)
        , i = keys.indexOf(String(key));
    return i !== -1 && list[i - 1] && list[keys[i - 1]];
}

获取下一个数据

_getNextData(list, key){
    var keys = _.keys(list)
        , i = keys.indexOf(String(key));
    return i !== -1 && list[i + 1] && list[keys[i + 1]];
}

下一个按钮功能

_setNext(){
    var key = parseInt(
                this._findKey(this.state.list, this.state.subject.id)
        ) || 0;

    var data = this._getNextData(this.state.list, key);

    /**
     *  If exists page
     */
    if(this.state.list[key].subject.pages.length > 0){

        /**
         * If didn't show any pages, start with first page
         */
        var currentPageId = (this.state.page ? this.state.page.id : 0);

        /*
         * If this page is first page, get first item of page data
         * Else get next item of page data
         */
        if(currentPageId == 0){
            this.setState({ page : this.state.list[key].subject.pages[0] });
        } else {
            var pageKey = this._findKey(this.state.list[key].subject.pages, parseInt(currentPageId), false);
            var pageData = this._getNextData(this.state.list[key].subject.pages, pageKey);

            /**
             * If exists page, show this page 
             * If not exists page, show next subject
             */
            if(pageData){
                this.setState({ page : pageData });
            } else {

                if(data){
                    this.setState({ page : false, subject : data.subject });
                    this._changeNextButton(key + 1);
                }
            }
        }

    /**
     * if not exists page, show subject
     */
    } else {
        if(data){
            this.setState({ page : false, subject : data.subject });
            this._changeNextButton(key + 1);
        }
    }
}

上一个按钮功能

_setPrev(){
    var key = parseInt(
            this._findKey(this.state.list, this.state.subject.id)
        ) || 0;

    var data = this._getPrevData(this.state.list, key);


    /**
     *  If exists page
     */
    if (this.state.list[key].subject.pages.length > 0) {
        var currentPageId = (this.state.page ? this.state.page.id : 0);

        if (currentPageId == 0) {
            this.setState({ page: this.state.list[key].subject.pages[ this.state.list[key].subject.pages.length - 1 ] });
        } else {
            var pageKey = this._findKey(this.state.list[key].subject.pages, parseInt(currentPageId), false);
            var pageData = this._getPrevData(this.state.list[key].subject.pages, pageKey);


            if (pageData) {
                this.setState({page: pageData});
            } else {

                if (data) {
                    this.setState({page : false, subject: data.subject});
                    this._changeNextButton(key - 1);
                }
            }
        }

    /**
     * if not exists page, show subject
     */
    } else {
        if (data) {
            this.setState({page : false, subject: data.subject});
            this._changeNextButton(key - 1);
        }
    }
}