javascript - 异步/等待不适用于反应 js(钩子)
问题描述
我正在尝试创建一个反应应用程序,我在其中使用反应挂钩。在用户提交表单时的登录表单中,电子邮件和密码被传递给 handleClick 函数。该函数从服务器获取数据并显示在客户端,但响应始终是未定义的,并且在从服务返回之前被调用。这是代码...
登录.js
import React, { useState, useEffect } from 'react';
import { Button, Form, Container, Row, Col } from 'react-bootstrap';
import './login.css'
import * as services from '../services'
function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleClick = async(e) => {
e.preventDefault();
console.log(email, password);
let res = await services.login(email, password);
console.log(res);
}
return (
<Container>
<Row className="justify-content-md-center ">
<header><h2>Rao infotech workspace</h2></header>
</Row>
<Row className="justify-content-md-center form">
<Col md="auto">
<Form onSubmit={handleClick}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" onChange={(e) => setEmail(e.target.value)} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
</Form.Group>
<Button variant="primary" type="submit" >
Submit
</Button>
</Form>
</Col>
</Row>
</Container>
);
}
export default Login;
服务.js
import axios from "axios";
const baseUrl = "http://localhost:4000/";
export function login(email, password) {
var body = {email: email, password: password}
axios.post(baseUrl + 'user/login', body)
.then((res)=>{
console.log("res in service", res);
return res;
})
}
我尝试使用 useEffect 但不知道如何在 useEffect() 中调用函数
解决方案
您需要返回您的login
功能:
export async function login(email, password) {
var body = {email: email, password: password}
return axios.post(baseUrl + 'user/login', body)
.then((res)=>{
console.log("res in service", res);
return res;
})
}
或者简单地说:
export async function login(email, password) {
var body = {email: email, password: password}
return axios.post(baseUrl + 'user/login', body);
}
推荐阅读
- javascript - 如何以编程方式破坏剑道网格?
- c# - 尽管 EditText 的 InputType 是 ClassText,但允许文本输入
- c# - 如何获取当前的测试夹具属性
- reactjs - React MaterialUI v3.7 知道在输入下会出现帮助文本,如何设置高度?
- javascript - 当我使用 .value 获取输入值时,它返回 Undefined
- java - 为任何双精度生成本地化、全精度输出的 MessageFormat 模式是什么
- xamarin - 北欧Dfu库的Xamarin绑定
- c++ - Cpp,强制执行预处理器评估顺序
- sql - 如何使用数据工厂从表缓存中删除数据?
- python - 为什么我会在 'where 子句' 中得到“未知列 'Jacob'”?