Question

总体来说，我对ReactJS和JavaScript框架非常陌生。我正在使用带有限制和偏移量的API的Django后端。

我创建了一个可以很好地处理这些分页的函数：

handlePageClick(data) {
        this.setState({
            offset: Math.ceil((data-1) * this.state.limit),
            page: data},
            function(){
                console.log('/api/results?limit='+ this.state.limit +'&offset=' + this.state.offset)
            }
        )
    }

还可以使用react-js-pagination来轻松地制作页面。

<Pagination
  activePage={this.props.page}
  itemsCountPerPage={this.props.limit}
  totalItemsCount={this.props.count}
  pageRangeDisplayed={5}
  onChange={this.handlePageClick}
/>

我尝试使用componentWillUpdate，直到得知setState是异步的。

componentWillUpdate (_, nextState){
        if (!isEqual(this.state.offset, nextState.offset)) {
            const pagination = {
                limit: this.state.limit,
                offset: this.state.offset,
            };
            this.props.getBy(pagination)
        }
    }

然后我使用推荐的componentWillReceiveProps。

componentWillReceiveProps(newProps){
        if (newProps.offset !== this.props.offset) {
            const pagination = {
                limit: this.props.limit,
                offset: this.props.offset,
            };
            this.props.getBy(pagination)
        }
    }

但是现在我找不到更新变量以更改页面的方法。

我该怎么办？

Answer 1

您只需要编码到componentWillReceiveProps中。现在，在页面更改上，如果要调用api以获取更多数据，则可以执行此操作，也可以通过setState更改状态。

   componentWillReceiveProps(newProps){
        if (newProps.offset !== this.props.offset) {
            const pagination = {
                limit: this.props.limit,
                offset: this.props.offset,
            };
            this.setState({limit:this.props.limit,offset: this.props.offset}, 
              () => {
                this.props.getBy(limit, offset);
              });
        }
    }

如何在ReactJS中处理道具？

1 个答案: