Javascript 上一页/下一页的多维集合

我正在研究教育系统。正在尝试显示问题和主题的页面。因此，我添加了前进/后退按钮。“下一步”按钮起作用，但“后退”按钮有问题。第一期，然后是主题页

像这样的结构

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课>第1页>第2页>第2课>第3页

上证综指的情况

第1课<第1页<第2页<第2课<第3页

---

查找集合的键

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

_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);
        }
    }
}

获取以前的数据

_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]];
}

获取下一个数据

_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]];
}

下一步按钮功能

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

_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);
        }
    }
}

上一个按钮功能

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

_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);
        }
    }
}

---

你能试着对这个问题再具体一点吗？不确定您的back/previous有什么问题。现在下一步工作正常。但当我尝试上一个。第1页<第2页<第1课<第3页<第2课关于这个问题，你能再具体一点吗？不确定您的back/previous有什么问题。现在下一步工作正常。但当我尝试上一个。第1页<第2页<第1课<第3页<第2课