es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de resolución de la promesa de React jsonserver.

28 Jul, 2023 Programación

Estoy creando una aplicación react/redux con un servidor de API falsa en formato JSON. Estoy intentando agregar un inicio de sesión y obtener datos del servidor de API falsa, los datos se muestran correctamente, pero los datos siempre resultan ser una promesa y los datos requeridos están dentro de la promesa. He intentado desestructurar de muchas formas pero arroja errores, ¿alguien podría ayudarme con esto?

Mi solicitud axios:

const urlss = "http://localhost:5000/users";

export const userslist = async () => {
  const r = await axios.get(urlss);
  const data = r.data;

  return data;
};
const newout2 = userslist();
const newout = newout2;
console.log(newout);

El lugar donde lo estoy utilizando:

export const login = (credentials) => (dispatch) => {
  return new Promise((resolve, reject) => {
    const matchingUser =
      newout2 &&
      newout2.find(({ username }) => username === credentials.username);

    if (matchingUser) {
      if (matchingUser.password === credentials.password) {
        dispatch(setUser(matchingUser));
        resolve(matchingUser);
      } else {
        dispatch(setUser(null));
        reject("Contraseña incorrecta");
      }
    } else {
      dispatch(setUser(null));
      reject("No se encontró ningún usuario");
    }
  });
};

Me está apareciendo este error.

enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema que estás enfrentando se debe al hecho de que tu función userslist() está devolviendo una promesa, y no los datos reales. Para acceder a los datos, necesitas esperar la llamada a la función usando await o utilizar .then() para manejar la promesa.

    Una posible solución es modificar tu función login() para esperar la llamada a la función userslist() antes de intentar encontrar un usuario coincidente. Aquí tienes un ejemplo de cómo podrías modificar tu código para abordar este problema:

    export const login = (credentials) => (dispatch) => {
  return new Promise(async (resolve, reject) => {
    const userList = await userslist(); // esperar la llamada a la función userslist()
    const matchingUser =
      userList &&
      userList.find(({ username }) => username === credentials.username);
    if (matchingUser) {
      if (matchingUser.password === credentials.password) {
        dispatch(setUser(matchingUser));
        resolve(matchingUser);
      } else {
        dispatch(setUser(null));
        reject("Contraseña incorrecta");
      }
    } else {
      dispatch(setUser(null));
      reject("No hay usuario coincidente");
    }
  });
};

    De esta manera, estás esperando la llamada a la función userslist() antes de intentar encontrar un usuario coincidente, y deberías tener acceso a los datos reales en lugar de una promesa.

Comments are closed.