#reactjs
#reactjs
Вопрос:
У меня есть приложение для отображения в таблице. Я извлекаю 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;
Ответ №1:
Вы не должны пытаться запускать componentDidMount
по щелчку, потому что componentDidMount
выполняется только один раз в жизненном цикле компонента, сразу после того, как компонент смонтирован.
Вы должны изменить onBtNext()
функцию для извлечения данных.
Ответ №2:
Вы не можете просто добавить событие onClick на кнопку для повторной выборки?
<button onClick={() => call your api method here}><button/>