Блог

У меня есть приложение для отображения в таблице. Я извлекаю api из django rest framework , API разбит на страницы. Поэтому, когда я загружаю приложение react, оно загружает первую страницу (например, вызывает http://localhost:8000/cluster/37/tasks?page=1 ) по умолчанию. У меня есть кнопка next.Я пытаюсь перейти на следующую страницу (например, она должна вызывать http://localhost:8000/cluster/37/tasks?page=2 ) при нажатии next.

Как мне попытаться запустить выборку при нажатии кнопки далее? Спасибо. Вот пример моего кода ниже :

 class TasksApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      columnDefs: [
        { headerName: 'Temp RowNumber', valueGetter: 'node.rowIndex'},
        { headerName: 'Status', field: 'status' },
        { headerName: 'Params', field: 'joint_params' },
        { headerName: 'Total Pages', field: 'total_pages' },
        { headerName: 'Total Results', field: 'total_results' },
      ],
      defaultColDef: { resizable: true },
      rowData: null,
      dataLength: 0,
      id: this.props.location.state.id,
      task: this.props.match.params.value,
      headerHeight: 39,
      rowHeight: 49,
      paginationPageSize: 200,
      totalPages: null,
      currentPage: null,
      pageSize: null,
      pageNumberList: [],
      pageSizeList: [],
      startIndex: 0,
      endIndex: 5,
    };
  }

  onGridReady = params => {
    this.gridApi = params.api;
  };

  componentDidMount(){
    fetch(`http://localhost:8000/cluster/${this.state.id}/tasks?page=${this.state.page}`, options)
    .then(res => res.json())
    .then(data => this.setState({
      rowData: data['results'],
      dataLength: data['totalDataOnPage'],
      totalData: data['totalData'],
      currentPage: data['currentPage'],
      totalPages: data['totalPages'],
      nextLink: data['nextPage'],
      previousLink: data['previousPage']
    }))
    .catch(err => console.log(err))
  }


  onPaginationChanged = () => {
    let list_pages = []
    if (this.gridApi) {
      console.log('total pages', this.state.totalPages)

      for (var i = 1; i <= this.state.totalPages; i  ) {
        list_pages.push(i);
      }
      this.setState({ pageNumberList: list_pages })
    }
  };


  onBtNext = () => {
//how do I trigger the componentDidMount to load the next page number on click next
    var url = new URL(this.state.nextLink);
    var pagenumber = url.searchParams.get("page");
    this.setState({ page: pagenumber })
  }

  render() {
    const pagelist = this.state.pageNumberList.slice(this.state.startIndex, this.state.endIndex)
    return (
      <>
//code truncated to show the `next`, the table and another part of pagination was here. 
.......
next button below..

                    {!pagelist.includes(this.state.totalPages) ?
                      <PageDirection onClick={() => this.onBtNext()} style={{marginLeft: '15px'}}>
                        <ChevronRight style={{ padding: '5px' }} />
                      </PageDirection> 
                      : null
                    }
                  </PaginationSectorTwo>
                </div>
              </Fragment>
            </TableContent>
          </InnerWrapper>
        </Wrapper>
      </>

    )
  }

}

export default TasksApp;
  

Вы не должны пытаться запускать componentDidMount по щелчку, потому что componentDidMount выполняется только один раз в жизненном цикле компонента, сразу после того, как компонент смонтирован.

Вы должны изменить onBtNext() функцию для извлечения данных.

Вы не можете просто добавить событие onClick на кнопку для повторной выборки?

 <button onClick={() => call your api method here}><button/>