Creo que probablemente me estoy perdiendo algo bastante simple.
en src/api/index.js tengo lo siguiente:
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); } }Mi loginUser está siendo llamado en mi controlador onSubmit en mi src/component/login.js
const submitHandler = async (event) => { event.preventDefault() setUserData( {username, password}) const response = await loginUser(username, password) alert({response}) console.log(response.data) }Esta llamada API regresa de la función loginUser, cuando onSubmit la llama:
{success: true, error: null, data: {…}} data: {token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2M…TU2fQ.4l7g5y8hlEDxlmkWUPiVIfM6XWCqHa0410QXGLy72vw', message: 'Thanks for logging in to our service.'} error: null success: true [[Prototype]]: ObjectSin embargo, sea lo que sea que intente acceder a los datos devueltos desde submitHandler (como console.log o cualquier variación de response.data.token que intente, obtendré un valor nulo. A partir de ahora, la única forma en que puedo acceder a cualquier API devuelve en mi carpeta API son a través del almacenamiento local.
Por favor, ayúdame a identificar lo que me estoy perdiendo.
En primer lugar, está utilizando ambas promesas ( .then ) y async await .
Cuando await el fetch.then.then , en realidad espera el último valor devuelto. En su caso, dado que no devuelve nada ( undefined ) de su último .then , no puede acceder a los datos.
Intenta devolver el resultado -
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 })