Question

我有两个组成部分
读取模式和分页

读取模式组件

     state = {
            currentPdf:[],
            currentPage: null,
            totalPages: null,
            intialState:1,
        };
        constructor(props) {
            super(props);
            this.onChangePage = this.onChangePage.bind(this);
            this.onCurrentPageNo = this.onCurrentPageNo.bind(this);
            this.onTotalPage = this.onTotalPage.bind(this);

        }
        componentDidMount() {
            this.props.fetchPdfContent();
        }
        onCurrentPageNo(currentPageNo){
            this.setState({ currentPage: currentPageNo });
        }
        onChangePage(currentPdf) {
            this.setState({ currentPdf: currentPdf });
        }
        onTotalPage(totalpages){
            this.setState({ totalPages: totalpages });
        }
        gotoPrevPage = (currentTarget) => {
            if (this.state.currentPage > 1) {
                let prevPage = this.state.currentPage - 1;
                this.setState({ intialState: prevPage });
            }
        }

     render() {
       return (
          <button className="btn btn-primary prev-btn pageBtn" onClick={this.gotoPrevPage.bind(this)}>
                 <span aria-hidden="true" className="icon-ico_arrow-right icomoon"> Left </span>
          </button>
          <Pagination initialPage={intialState} items={pdfcontnet} onTotalPage={this.onTotalPage} onChangePage={this.onChangePage} onChangePageNo={this.onCurrentPageNo} />
        )
      }

分页组件

     constructor(props) {
            super(props);
            this.state = { pager: {} };
        }
        componentDidMount() {
            // set page if items array isn't empty
            if (this.props.items && this.props.items.length) {
                this.setPage(this.props.initialPage);
            }
        }
        componentDidUpdate(prevProps, prevState) {
            // reset page if items array has changed
            this.setPage(this.props.initialPage);
        }
        setPage(page) {
            console.log(page + 'pages');
            var items = this.props.items;
            var pager = this.state.pager;
            if (page < 1 || page > pager.totalPages) {
                return;
            }
            // get new pager object for specified page
            pager = this.getPager(items.length, page);
            // get new page of items from items array
            var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
            // update state
            this.setState({ pager: pager });
            // call change page function in parent component
            this.props.onChangePage(pageOfItems);
        }

当我单击gotoPrevPage（）initalState值时需要传递

this.setPage(this.props.initialPage);

如果我将我的componentDidUpdate（）状态指定为

Answer 1

尝试一下：

onClick={()=>this.gotoPrevPage.bind(this)}

Answer 2

您需要在读取模式组件呈现方法中将initialPage={intialState}更改为initialPage={this.state.intialState}。

PS：您实际上应该将其拼写为initial，而不是intial。

Answer 3

您的状态对象应位于ReadMode的构造函数中。您还应该使用this.setState({})更新状态。当通过commponentDidUpdate在分页组件中添加新项时，您也不应尝试重新加载整个DOM。 React使用virtual DOM并且不需要每次更新一个元素时都重新加载页面上的每个元素。看来您的问题的一部分是您的应用程序不断更新，并且您陷入了不断更新DOM的永无止境的循环中。

此外，您可能不需要分页即可拥有本地状态。您可以将状态/数据存储在父容器中，然后将其通过props传递给分页。 React使用单向数据流，您应该熟悉将props从父组件传递到子组件的情况。

通过阅读the documentation来梳理state和lifecycle functions，了解React如何使用virutal DOM来更新元素，并重写您的App，以便{{ 1}}主要存储在父组件中，并通过state传递到子组件。

忽略基本的React概念并以不太理想的方式构建项目是问题的根源。

对父母对孩子事件做出反应传递价值

3 个答案: