Open
Description
Search on page 1 is working fine but error when search on page 2/3/4/5
Code:
<PaginationProvider
pagination={paginationFactory(pageOptions)}
keyField='ID'
columns={columns}
data={this.state.dataReceipt}
>{({ paginationProps, paginationTableProps }) => (
<ToolkitProvider
keyField='ID'
columns={columns}
data={this.state.dataReceipt}
search={{
placeholder: 'Find'
}}
>
{toolkitProps => (
<React.Fragment>
<Row className="mb-2">
<Col md="4">
<div className="search-box me-2 mb-2 d-inline-block">
<div className="position-relative">
<SearchBar
placeholder={"Find"}
{...toolkitProps.searchProps}
/>
<i className="bx bx-search-alt search-icon" />
</div>
</div>
</Col>
</Row>
<Row>
<Col xl="12">
<div className="table-responsive">
<BootstrapTable
keyField={"ID"}
responsive
bordered={false}
striped={false}
defaultSorted={defaultSorted}
selectRow={selectRow}
classes={
"table align-middle table-nowrap"
}
rowEvents={tableRowEvents}
headerWrapperClasses={"thead-light"}
{...toolkitProps.baseProps}
{...paginationTableProps}
/>
</div>
</Col>
</Row>
<Row className="align-items-md-center mt-30">
<Col className="inner-custom-pagination d-flex">
<div className="d-inline">
<SizePerPageDropdownStandalone
{...paginationProps}
/>
</div>
<div className="text-md-right ms-auto">
<PaginationListStandalone
{...paginationProps}
/>
</div>
</Col>
</Row>
<br />
</React.Fragment>
)}
</ToolkitProvider>
)}
</PaginationProvider>`
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",
Error message:
Uncaught TypeError: Cannot read properties of undefined (reading 'ID')
at Function.get (utils.js:29:1)
at selection.js:25:1
at Array.map (<anonymous>)
at getSelectionSummary (selection.js:24:1)
at SelectionProvider.render (selection-context.js:145:1)
at finishClassComponent (react-dom.development.js:17485:1)
at updateClassComponent (react-dom.development.js:17435:1)
at beginWork (react-dom.development.js:19073:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at react-dom.development.js:11327:1
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
at flushSyncCallbackQueue (react-dom.development.js:11309:1)
at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
at Object.enqueueSetState (react-dom.development.js:12467:1)
at ToolkitProvider.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365:1)
at ToolkitProvider.onSearch (context.js:88:1)
at SearchBar.js:70:1
at later (SearchBar.js:36:1)
The above error occurred in the <SelectionProvider> component:
at SelectionProvider (http://localhost:3000/static/js/vendors~main.chunk.js:391764:5)
at PaginationDataProvider (http://localhost:3000/static/js/vendors~main.chunk.js:398745:5)
at SortProvider (http://localhost:3000/static/js/vendors~main.chunk.js:391999:7)
at SearchProvider (http://localhost:3000/static/js/vendors~main.chunk.js:402360:9)
at DataProvider (http://localhost:3000/static/js/vendors~main.chunk.js:390858:7)
at BootstrapTableContainer (http://localhost:3000/static/js/vendors~main.chunk.js:391045:7)
at div
at div
at Col (http://localhost:3000/static/js/vendors~main.chunk.js:520290:25)
at div
at Row (http://localhost:3000/static/js/vendors~main.chunk.js:525236:25)
at ToolkitProvider (http://localhost:3000/static/js/vendors~main.chunk.js:401227:5)
at Toolkitprovider
at StateProvider (http://localhost:3000/static/js/vendors~main.chunk.js:400909:5)
at CustomizableProvider
at div
at CardBody (http://localhost:3000/static/js/vendors~main.chunk.js:518928:25)
at div
at Card (http://localhost:3000/static/js/vendors~main.chunk.js:518869:25)
at div
at Col (http://localhost:3000/static/js/vendors~main.chunk.js:520290:25)
at div
at Row (http://localhost:3000/static/js/vendors~main.chunk.js:525236:25)
at div
at div
at Unidentified (http://localhost:3000/static/js/main.chunk.js:183643:5)
at div
at div
at Layout (http://localhost:3000/static/js/main.chunk.js:14122:5)
at C (http://localhost:3000/static/js/vendors~main.chunk.js:496112:37)
at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:489196:75)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:495855:29)
at AppRoute (http://localhost:3000/static/js/main.chunk.js:189591:16)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:496057:29)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:495486:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:495107:35)
at App (http://localhost:3000/static/js/main.chunk.js:605:5)
at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:489196:75)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:495486:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:495107:35)
at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:488907:20)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Metadata
Metadata
Assignees
Labels
No labels