我的功能一直未定义，我不知道为什么？

Question

THIS IS MY APP.JSX CODE This is the code it keeps bringing this error when I run npm start src\App.jsx Line 16:3: 'getFiles' is not defined no-undef
Line 33:1: 'onDrop' is not defined no-undef
Line 43:17: 'Web3' is not defined no-undef
Line 43:23: 'account' is not defined no-undef
Line 43:42: 'instance' is not defined no-undef

import { EthProvider } from "./contexts/EthContext";
import SolidityDriveContract from "./contracts/SolidityDrive.json";
import Intro from "./components/Intro/";
import Setup from "./components/Setup";
import Demo from "./components/Demo";
import Footer from "./components/Footer";
import "react-drop-zone/dist/styles.css";
import "./App.css";
import {StyledDropZone} from 'react-drop-zone';
import {Table} from "reactstrap";
import {FileIcon, defaultStyles} from 'react-file-icon';
import fileReaderPullStream from 'pull-file-reader';
import ipfs from "./ipfs";

try {
  getFiles = async () => {
    const { account, contract } =this.state;
    let filesLength = await contract.methods.getLength().call({from:account[0]});
    let files = [];
    for (let i = 0; i < filesLength; i++) {
      let file = await contract.methods.getFile(i).call(account[0]);
      files.push(file);  
    }
    this.setState({SolidityDrive: files});
  
  
   }
  
} catch (error) {
  console.log(error);
}

onDrop = async (file) => {
  try {
    const {account, contract} = this.state;
    const stream = fileReaderPullStream(file);
    const result = await ipfs.add(stream); 
  } catch (error) {
    
  }
}

this.setState({ Web3, account, contract: instance }, this.getFiles);

function App() {
 
  return (
    <><EthProvider>
      <div id="App">
        <div className="container">
          <Intro />
          <Setup />
          <Demo />
          <StyledDropZone  onDrop={this.onDrop}/>
          <Table>
            <thead>
              <tr>
                <th width="7%" scope="row">Type</th>
                <th>Filename</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
             <tr>
                <th><FileIcon size={30} extension="docx" {...defaultStyles.docx}/></th>
                <th>Filename.docx</th>
                <th>2019.3.17</th>
             </tr>
            </tbody>
          </Table>
          <hr/>
          <Footer />
        </div>
      </div>
    </EthProvider>
    </>
    
  );
}

export default App;

the package.json file

{
  "name": "truffle-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.0",
    "ipfs-api": "^26.1.2",
    "pull-file-reader": "^1.0.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-drop-zone": "^4.3.2",
    "react-file-icon": "^1.2.0",
    "react-moment": "^1.1.2",
    "react-scripts": "^4.0.3",
    "reactstrap": "^9.1.4",
    "web3": "^1.7.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

You are using a functional component. So, you have to use hooks for setting the state

 function App() { //set state here return() }

Secondly, try-catch should be written after

 function App() { //try-catch here return() }

& functions will be created like this -

const getFiles = async () => { //code here }
const onDrop = async (file) => { //code here }

Answer 2

I think this article will help.

React Functional Components Const vs Function

const MyComponent = () => {
    return(
      ..
    )
}

vs.

function MyComponent() {
    return(
      ..
    )
}