Javascript 然后（）方法在react中实际返回数据之前执行

请参阅下面的代码：

class WhiteBoard extends React.Component {
constructor(props) {
    super(props);
    this.userService = new UserService();
    this.state = {user: []};
}

userLogin = (user) => {
    console.log("inside whiteborad user login");

    let loginuser = {
        username: user.username,
        password: user.password
    };
    console.log(loginuser);

    this.userService.getLoggedInUser(loginuser)
        .then( data => {
            console.log("adsad"+mydata);
            this.setState({user: mydata})
        });

    console.log(this.state.user)
}

用户服务如下：

class UserService {

async getLoggedInUser(user){
    console.log("inside user service");
    console.log(user);
    const USER_API_URL = API_URL + "/api/login";
    fetch(USER_API_URL, {
        headers : {
            'Content-Type' : 'application/json'
        },
        method : "POST",
        body : JSON.stringify(user)
    }).then(response => response.clone().json()).then(data => {
        console.log(data);
        return data;
    });
}
}

export default UserService;

我在控制台中获得以下输出：

inside whiteborad user login
WhiteBoard.js:29 {username: "bird", password: "bird"}
UserService.js:6 inside user service
UserService.js:7 {username: "bird", password: "bird"}
WhiteBoard.js:37 []
WhiteBoard.js:33 adsadundefined
UserService.js:16 {id: 100, username: "bird", password: "bird", firstName: "Alice", lastName: "Kathie", …}

---

问题是，我在userService.getLoggedInUser（）.then（）部分中调用的then方法中得到了未定义的数据。因此，setState不起作用并返回null。在userService方法中，数据非常好。但是，在userLogin方法中，当我调用userService时，该方法并没有等待从userService函数获得响应。我如何解决这个问题？

问题是您使用了一个承诺，但不要

返回它，这样调用者就没有与它的连接，而是
然后
链接到
异步
函数的默认承诺。这里的正常修复方法是
返回fetch（…）
，但是您可以采用另一种方法，因为您使用的是
异步
函数

要修复它，请利用
async
并使用
wait
：

class UserService {
  async getLoggedInUser(user){
    console.log("inside user service");
    console.log(user);
    const USER_API_URL = API_URL + "/api/login";

    let response = await fetch(USER_API_URL, {
        headers : {
            'Content-Type' : 'application/json'
        },
        method : "POST",
        body : JSON.stringify(user)
    });

    let data = await response.clone().json();

    console.log(data);
    return data;
  }
}

现在它被正确地排序了

当使用带有
的承诺时，最常见的问题之一是丢球，忘记显式地
返回在继续之前需要等待的承诺。
问题是你使用了承诺，但是不要
返回它，这样调用者就没有与它的连接，取而代之的是你的
然后
链接到
异步
函数的默认承诺。这里的正常修复方法是
返回fetch（…）
，但是您可以采用另一种方法，因为您使用的是
异步
函数

要修复它，请利用
async
并使用
wait
：

class UserService {
  async getLoggedInUser(user){
    console.log("inside user service");
    console.log(user);
    const USER_API_URL = API_URL + "/api/login";

    let response = await fetch(USER_API_URL, {
        headers : {
            'Content-Type' : 'application/json'
        },
        method : "POST",
        body : JSON.stringify(user)
    });

    let data = await response.clone().json();

    console.log(data);
    return data;
  }
}

现在它被正确地排序了

当使用带有
的承诺时，最常见的问题之一是丢球，忘记显式地
返回在继续之前需要等待的承诺。
您需要返回调用
获取
的结果
getLoggedInUser（）
本身返回
undefined
您需要返回调用
fetch
的结果
getLoggedInUser（）
本身返回
未定义
将
返回fetch（用户\u API\u URL，{…
工作？（在函数声明中删除
async
后）删除
async
是没有必要的，但是
返回
是如果你不打算等待
的话。你需要以某种方式把这个球向前推进。
async
函数被允许返回承诺，在这种情况下，它们可以正确链接。谢谢，它实际上解决了问题。我不知道这是个问题。干杯！会吗
返回fetch（用户\u API\u URL，{…
work？（在函数声明中删除
async
后）删除
async
是没有必要的，但是
返回
是如果你不打算等待
的话。你需要以某种方式把球向前推进。
async
函数可以返回承诺，在这种情况下它们可以正确链接。谢谢，它实际上解决了这个问题。我不知道这是个问题。干杯！