[英]React-js Fetch api being called multiple times during Login
我是 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
只有在提交表單后,您才應該放置登錄/獲取邏輯。
在這種情況下,將您的提取邏輯放在handleSubmit
。 這樣,它只會在表單提交時調用( onSubmit
)。
因此,每次組件重新渲染時,react 組件都會在 return 語句之前運行所有代碼,當您填寫表單時,組件正在重新渲染,因此會調用 fetch api。 要阻止這種情況,請將 api 代碼放在僅在您提交表單時調用的函數中。
const submitForm = () => {
// call api here
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.