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

Question

我是 React 世界的新手，组件的使用，我有一个潜在的问题，我有一个从App.js render() 调用的登录组件。

Login.js有一个fetch() api，用于获取form上输入的任何内容的响应。

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

实际结果- 多次调用fetch api，当我填写表单时，从我开始在表单上输入开始进行仪式，完成输入username和password后完整结果成功，并且submit按钮似乎没有任何影响。

相关代码关于我上面的内容：

你在下面看到的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;

Login.js

import React  from "react"
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import Col from 'react-bootstrap/Col'
import useForm from './useForm.js'
// Using hooks instead of a Class and constructor


const Login = () => {
    const { values, handleChange, handleSubmit } = useForm(signup)

    function signup(){
        console.log(values)
    }

    var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
        targetUrl = '...'

    fetch ( proxyUrl+targetUrl, {
            method: 'POST',
            headers: {
                'content-Type': 'application/json',
                'Accept' : 'application/json',
            },
        body: JSON.stringify(values)
    })
    .then((response) => response.json())
    .then((values) => {
        console.log('Success:', values)
    })
    .catch((error) => {
        console.error('Error:', error)
    })


    return (
<Form noValidate onSubmit={handleSubmit}>
    <Form.Row>
        <Form.Group as={Col} controlId="formGridUserName">
            <Form.Label>UserName</Form.Label>
            <Form.Control
                autoFocus
                name={'username'}
                value={values.username}
                type='username'
                placeholder="username"
                onChange={handleChange}
            />
        </Form.Group>

        <Form.Group as={Col} controlId="formGridFirstName">
            <Form.Label>First Name</Form.Label>
            <Form.Control
            autoFocus
            name={'firstname'}
            value={values.firstname}
            type='first name'
            placeholder="First name"
            onChange={handleChange}
            />
        </Form.Group>

        <Form.Group as={Col} controlId="formGridSecondName">
            <Form.Label>Last Name</Form.Label>
            <Form.Control
            autoFocus
            name={'lastname'}
            value={values.lastname}
            type='last name'
            placeholder="Last name"
            onChange={handleChange}
            />
        </Form.Group>
    </Form.Row>

    <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control
        autoFocus
        type="email"
        name={'email'}
        value={values.email}
        onChange={handleChange}
        placeholder="Enter email"
        />
        <Form.Text className="text-muted">
            We'll never share your email with anyone else.
        </Form.Text>
  </Form.Group>

  <Form.Group controlId="formBasicPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control
        autoFocus
        type="password"
        name={'password'}
        value={values.password}
        onChange={handleChange}
        placeholder="Password" />
    </Form.Group>
        <Form.Group controlId="formBasicCheckbox">
            <Form.Check type="checkbox" label="Check me out" />
    </Form.Group>

    <Button
        variant="primary"
        type="submit"
        value="Submit"
        >
        Login
    </Button>

</Form>
  );
}

export default Login

我如何运行 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

Answer 1

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

在这种情况下，将您的提取逻辑放在handleSubmit 。 这样，它只会在表单提交时调用（ onSubmit ）。

Answer 2

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

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

}