Uncaught TypeError: this is undefined in Amplify UI in React

Question

我安装了 Amplify Pagination 来美化我的项目，但是，在我将代码粘贴到我的项目中后，事情变得很奇怪，控制台总是显示

未捕获类型错误：这是未定义的

https://ui.docs.amplify.aws/components/pagination

然后我创建了一个默认的 React 项目，但结果还是一样。

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;

Answer 1

“this”未定义，因为您不在 class 组件中

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;

Uncaught TypeError: this is undefined in Amplify UI in React

Uncaught TypeError: this is undefined in Amplify UI in React

javascript

amplifyjs

reactjs