Instalé Amplify Pagination para embellecer mi proyecto, sin embargo, las cosas se pusieron raras después de pegar el código en mi proyecto, la consola siempre muestra
TypeError no capturado: esto no está definido
https://ui.docs.amplify.aws/components/pagination
Luego creé un proyecto React predeterminado pero el resultado sigue siendo el mismo.
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { AmplifyProvider } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; // default theme ReactDOM.render( <React.StrictMode> <AmplifyProvider> <App /> </AmplifyProvider> </React.StrictMode>, document.getElementById('root') ); import { Pagination } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; function App() { return ( <div className="App"> <Pagination currentPage={1} totalPages={10} siblingCount={1} onChange={()=>this.onChange()} onNext={()=>this.onNext()} onPrevious={()=>this.onPrevious()} /> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;"esto" no está definido porque no está en un componente de clase
function App() { const onChange = () => { do something } const onNext = () => { do something } const onPrevious = () => { do something } return ( <div className="App"> <Pagination currentPage={1} totalPages={10} siblingCount={1} onChange={onChange} onNext={onNext} onPrevious={onPrevious} /> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;