Currently, we would like to create a table using page annements listed in the Material UI library documentation.
Postscript: https://teratail.com/questions/311503I have also asked a question.
Specifically, https://material-ui.com/components/Tables/I would like to implement the Custom Pagination Actions listed in.
Image:
PagenationTableComponent.js wants to display JSON data passing by AXIOS, but the following error will occur.
If this Rows.Slice is not functioning, please teach me how to fix it.
JSON data is as follows.
[{"listno": 1, "Saiyoudate": "2008-10-06", "SOFTWARENAME": "Symantec Endpoint Protection", "VERSION": "-" "Shubetu": "Paid", "LicenseManage": "○", "YouTo": "antivirus", "Bikou": "Required for system management when using", "AUTHORIZER": "Yamada", "ApprovalDate": "2008-10-06", "URL": "https://jp.broadcom.com/products/cyber-security/endpoint/end-user"}]
TypeError: Rows.Slice Is Not A Function CUSTOMPAGINATIONACTIONSTABLE C: /workspace/spring-backend-3/frontend/src/component/pagenationtableComponent.js: 117 114 | RETURN ( 115 | < TableContainer Component= {Paper} > 116 | < Table ClassName= {classes.table} aria-label= "Custom Pagination Table" > ≫ 117 | < TableBody > | ^ 118 | {(RowSperpage > 0 119 |? Rows.Slice (Page * Rowsperpage, Page * ROWSPERPAGE + ROWSPERPAGE) 120 |: Rows View Compiled 17 17 Stack Frames Were Collapsed.
PAGENATIONTABLECOMPONENT.JS
Import React from 'React'; Import Proptypes from 'prop-Types'; IMPORT {MAKESTYLES, USETHEME} From '@ MATERIAL-UI /CORE /STYLES'; IMPORT TABLE FROM '@ MATERIAL-UI /CORE /TABLE'; IMPORT TABLEBODY from '@ Material-UI /Core /TableBody'; IMPORT TABLECELL FROM '@ MATERIAL-UI /CORE /TABLECELL'; IMPORT TABLECONTAINER FROM '@ MATERIAL-UI /CORE /TableContainer'; Import TableFooter from '@ Material-UI /Core /TableFooter'; IMPORT TABLEPAGINATION From '@ Material-UI /Core /TablePagination'; IMPORT TABLEROW FROM '@ MATERIAL-UI /CORE /TABLEROW'; Import Paper from '@ Material-UI /Core /Paper'; Import Iconbutton from '@ Material-UI /Core /Iconbutton'; IMPORT FIRSTPAGEICON From '@ Material-UI /ICONS /FirstPage'; IMPORT KEYBOARDARROWLEFT FROM '@ MATERIAL-UI /ICONS /KEYBOARDARROWLEFT'; IMPORT KEYBOARDARROWRIGHT FROM '@ MATERIAL-UI /ICONS /KEYBOARDARROWRIGHT'; IMPORT LASTPAGEICON From '@ Material-UI /ICONS /LASTPAGE'; Import CheckListService from '../Services/checklist'; const usestyles1= makestyles ((Theme)= > ({ root: { FlexShrink: 0, MARGINLEFT: Theme.SPACing (2.5), } )); Function TablePaginationActions (PROPS) { CONST CLASSES= USESTYLES1 (); const THEME= USETHEME (); const {count, page, rowsperpage, onchangeepage}= probs; Const HandleFirstPageButtonClick= (Event)= > { OnChangePage (Event, 0); }; CONST HANDLEBACKBUTTONCLICK= (EVENT)= > { OnChangePage (Event, Page-1); }; const HandlenextButtonClick= (Event)= > { OnChangePage (Event, Page + 1); }; const HandlelastPageButtonClick= (Event)= > { OnChangePage (Event, Math.max (0, Math.ceil (Count /RowSperpage) -1); }; RETURN ( ≪ DIV ClassName= {classes.root} > ≪ Iconbutton OnClick= {HandleFirStpageButtonClick} disabled= {PAGE=== 0} aria-label= "First Page" ≫ {Theme.Direction=== 'RTL'? < LASTPAGEICON /> : ≪ FirstPageIcon /> } ≪ /IconButton > ≪IconButton OnClick= {handlebackButtonClick} disabled= {Page==== 0} aria-label= "Previous Page" > {theme.direction=== 'RTL'? < Keyboardarrowright /> : ≪ Keyboardarrowleft /> } ≪ /IconButton > ≪ Iconbutton OnClick= {HandlenextButtonClick} disabled= {Page > = Math.ceil (Count /RowSperpage) -1} aria-label= "NEXT PAGE" ≫ {Theme.Direction=== 'RTL'? < Keyboardarrowleft /> : ≪ Keyboardarrowright /> } ≪ /IconButton > ≪ Iconbutton OnClick= {HandlelastPageButtonClick} disabled= {Page > = Math.ceil (Count /RowSperpage) -1} aria-label= "Last Page" ≫ {Theme.Direction=== 'RTL'? < FirstPageIcon /> : ≪ LASTPAGEICON /> } ≪ /IconButton > ≪ /DIV > ; } TablePaginationActions.PropTypes= { COUNT: PROPTYPES.NUMBER.ISREQUIRED, onchangeepage: proptypes.func.isrequired, Page: PROPTYPES.NUMBER.ISREQUIRED, ROWSPERPAGE: PROPTYPES.NUMBER.ISREQUIRED, }; Let Rows= []; Rows= CheckListService.getList (). THEN ((RESPONSE)= > { RETURN RESPONSE.DATA })) const usestyles2= makestyles ({ Table: { minwidth: 500, } })) Export Default Function CustomPaginationActionStable () { CONST CLASSES= USESTYLES2 (); CONST [Page, SetPage]= React.usestate (0); const [RowSperpage, SetRowsPage]= React.usestate (5); CONST EMPTYROWS= ROWSPAPAGE-MATH.MIN (ROWSPERPAGE, ROWS.LENGTH-PAGE * ROWSPAGE); const HandleChangePage= (Event, NewPage)= > { SetPage (NewPage); }; Const HandleChangerOWSPAPAGE= (Event)= > { setRowSPerPage (PARSEINT (Event.Target.Value, 10)); setPage (0); }; RETURN ( ≪ TableContainer Component= {Paper} > ≪ Table ClassName= {classes.table} aria-label= "Custom Pagination Table" > ≪ TableBody > {(RowSperpage > 0 ? Rows.Slice (Page * Rowsperpage, Page * ROWSPERPAGE + ROWSPAGE) : Rows .MAP ((ROW)= > ( ≪ TABLEROW KEY= {Row.Listno} > ≪ TABLECELL COMPONENT= "TH" Scope= "ROW" > {row.listno} ≪ /TABLECELL > ≪ TableCell Style= {{Width: 160}} align= "right" > {row.saiyoudate} ≪ /TABLECELL > ≪ TableCell Style= {{Width: 160}} align= "right" > {row.softwarename} ≪ /TABLECELL > ≪ /TABLEROW > ))) {EmptyRows > 0 & & ( ≪ TABLEROW STYLE= {{Height: 53 * EMPTYROWS} > ≪ Tablecell colSpan= {6} /> ≪ /TABLEROW > )} ≪ /TableBody > ≪ TABLEFOOTER > ≪ TABLEROW > ≪ TABLEPAGINATION ROWSPERPAGEOPTIONS= {[5, 10, 25, {Label: 'all', Value: -1}]} colSpan= {3} COUNT= {Rows.Length} ROWSPERPAGE= {RowsperPage} PAGE= {Page} Selectprops= {{ INPUTPROPS: {'ARIA-LABEL': 'Rows PER PAGE'}, Native: TRUE, } OnChangePage= {HandleChangePage} OnChangerowSperpage= {HandleChangerowsPage} ActionSComponent= {TablePaginationactions} /> ≪/TABLEROW > < /TABLEFOOTER > ≪ /TABLE > ≪ /TableContainer > ; }
CheckList.js
IMPORT AXIOS From 'AXIOS' const checklist_rest_api_url= 'http: //localhost: 8080 /API /user s Class checklistService { getList () { RETURN AXIOS.GET (CheckList_REST_API_URL); } } export Default New ChecklistService ();
-
Answer # 1
Asks and resolved in the overseas version of the overseas version, and we will listen to the details.
Delete your own Row element and instead write the following contents to TablePageAngrationAction.import React, {UseEffect} from 'React'; //Import UseEffect Export Default Function CustomPaginationActionStable () { CONST CLASSES= USESTYLES2 (); CONST [Page, SetPage]= React.usestate (0); const [Rows, SETROWS]= REACT.USESTATE ([]); const [RowSperpage, SetRowsPage]= React.usestate (5); UseEffect (()= > { ChecklistService.getList (). THEN ((RESPONSE)= > SETROWS (Response.Data); //You May Need to Check if Response.Data Returns An Array, Otherwise You Will Face Errors. }, []) //Passing An Empty Array Will Call This Function Only at Component Mount
In this state, the amount of data was disturbed by the amount of data, so adjustment was required.
that's all.
- reactjs : IE11 can not convert ARROW functions @ babel /plugin-transform-arrow-functions does not work
- Only specific routes Only React (JavaScript) to LUMEN (PHP) will be played by CORS.
- reactjs : SyntaxError: unexpected token
- I want to change the time display of JavaScript
- reactjs : Map error (TS105) is an error (TS105) in a mechanism to display the result using AXIOS with REACT
- javascript : I can not GET JSON from API server that exists in Heroku in AXIOS
- reactjs : Axios does not catch the error (React + Flask)
- CORS problems. Golang /ReactJS
- reactjs : Realtime database -getting data from the database
To those who answered teraitail.com/questions/311503
htb2021-04-07 16:44:40