异步/等待不适用于反应 js（钩子）答案

【问题标题】：Async/await not working with react js(hooks)异步/等待不适用于反应 js（钩子）
【发布时间】：2020-03-31 09:07:13
【问题描述】：

我正在尝试创建一个反应应用程序，我在其中使用反应挂钩。在用户提交表单时的登录表单中，电子邮件和密码被传递给 handleClick 函数。该函数从服务器获取数据并显示在客户端，但响应始终是未定义的，并且在从服务返回之前被调用。这是代码...

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;

services.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() 中调用函数

【问题讨论】：

您没有使用异步和等待登录功能。您需要从登录功能返回承诺。你可以直接返回 axios 而不在那里解决它

标签： javascript reactjs async-await react-hooks

【解决方案1】：

您需要返回您的loginfunction：

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);
}

【讨论】：

登录功能无需等待 axios

【解决方案2】：

import axios from "axios";
const baseUrl = "http://localhost:4000/"; 

export function login(email, password) {
 var body = {email: email, password: password}
 return new Promise((resolve, reject) => {
   axios.post(baseUrl + 'user/login', body)
  .then((res)=>{
    console.log("res in service", res);
    return resolve(res);
    });
  })
}

只需在服务中创建承诺，您的 async/await 就会开始工作。

【讨论】：

axios 本身正在返回一个承诺。为什么不直接退货呢？
是的，你可以直接返回它，上面的代码是如果你想使用 .then 回调。

【解决方案3】：

你的 service.js 登录函数没有返回一个承诺，所以你不能等待它的结果

【讨论】：