React.js试图访问在我的/ API中工作并返回数据的API fetch的响应，但我无法在我的/src/中访问.&l

Question

我想我可能错过了一些非常简单的东西。

在src/api/index.js我有以下:

export async function loginUser(username, password) {
try {
const response = await fetch(`${BASE}/users/login`, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
user: {
username: username,
password: password
}
})
})
.then(response => response.json())
.then(result => {console.log(result)
const key = result.data.token
localStorage.setItem('stToken', JSON.stringify(key))
localStorage.setItem('username', JSON.stringify(username))
})


return response

} catch (error) {
console.log(error);
}
}

在src/component/login.js的onSubmit处理程序中调用loginUser

const submitHandler = async (event) => {
event.preventDefault()
setUserData( {username, password})
const response = await loginUser(username, password)
alert({response})
console.log(response.data)

}

当onSubmit调用loginUser函数时，这个API调用返回:

{success: true, error: null, data: {…}}
data: {token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2M…TU2fQ.4l7g5y8hlEDxlmkWUPiVIfM6XWCqHa0410QXGLy72vw', message: 'Thanks for logging in to our service.'}
error: null
success: true
[[Prototype]]: Object

但是，无论我尝试访问来自submitHandler的返回数据(例如console.log或response.data.token的任何变体)，我都只能获得null。到目前为止，我访问API文件夹中任何API返回的唯一方法是通过本地存储。

请帮我确定我错过了什么。

Answer 1

首先，你同时使用promises(.then)和async await。

当你await时，fetch.then.then实际上是在等待最后一个返回值。在您的例子中，由于您没有从上次的.then返回任何(undefined)，因此您不能访问数据。

尝试返回结果-

const response = await fetch(`${BASE}/users/login`, {...})
.then(response => response.json())
.then(result => {console.log(result)
const key = result.data.token
localStorage.setItem('stToken', JSON.stringify(key))
localStorage.setItem('username', JSON.stringify(username))
return result; // this is the line I added
})