Javascript 在登录期间多次调用React js Fetch api

我不熟悉React世界和组件的使用，我有一个潜在的问题，我有一个登录组件，我从

App.js

render（）调用它

Login.js

有一个

fetch（）

api，用于获取

表单上键入的任何内容的响应

预期结果-单击表单中的
submit
按钮，然后登录时，一次性调用
fetch
api

实际结果-
获取
api被多次调用，当我填写表单时，从我开始在表单上键入时，在我完成键入
用户名
和
密码
后，完成结果成功，
提交
按钮似乎没有任何影响

关于上述内容的相关代码：

下面看到的
useform.js
就是我正在使用的钩子

App.js

import React, {Component} from 'react'
import './App.css'
import Header from './components/Header.js'
import Login from './components/Login.js'

class App extends Component {
  render() {                                                                                                                                                             
      return (
      <div className="container">
       <Login />
      </div>
    );
  }
}

export default App;

如何运行react应用程序，非常简单，只需从
src
文件夹中的
npm start
，如果您对某个特定文件感兴趣，请查看我的文件夹结构

planner-app/
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

planner-app/src
├── App.css
├── App.js
├── components
│   ├── Header.js
│   ├── Login.css
│   ├── Login.js
│   ├── MainComponent.js
│   └── useForm.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

因此，每次组件重新提交时，react组件都会运行return语句之前的所有代码，当您填写表单时，组件正在重新提交，因此会调用fetch api。要停止此操作，请将api代码放入仅在提交表单时调用的函数中

const submitForm = () => {
// call api here

}

只有在提交表单后，才应放置登录/获取逻辑

const submitForm = () => {
// call api here

}

在这种情况下，将获取逻辑放入
handleSubmit
。这样，只有表单提交后才会调用它（
onSubmit
）