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.

TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘get’) al intentar hacer una llamada a la API con axios

Estoy tratando de obtener una lista de pedidos desde mi API de backend, pero obtengo este error en la consola:

Uncaught TypeError: Cannot read properties of undefined (reading 'get')

Me parece que la función axios.get no funciona y no sé por qué… La misma llamada GET funciona bien en otra parte de mi aplicación.

He probado con la versión 0.24.00 y 0.20.00 sin diferencia. El mismo error aparece.
También he intentado poner un signo de interrogación después de axios: axios?.get(.....) Aquí no obtengo ningún error, pero la llamada a la API no continúa. Parece que axios es false o null

Aquí está mi código:

import { useEffect, useState } from "react";
import { axios } from "axios";

const Order = ({ customerId }) => {
    const [customerOrders, setCustomerOrders] = useState([]);

    const authConfig = {
        auth: {
            username: "username",
            password: "password",
        },
    };

    useEffect(() => {
        const getOrders = () => {
            axios
                .get(`http://localhost:8080/api/v1/myorders/${customerId}`, authConfig)
                .then((response) => {
                    setCustomerOrders(...customerOrders, response.data);
                    console.log(response.data);
                });
        };
        getOrders();
    }, []);

    return <p> {customerOrders.length} </p>;
};
Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Parece haber un problema con la declaración de importación de axios. En lugar de importar axios desde el paquete axios, se importa desde una cadena "axios". Esto puede hacer que la variable axios esté indefinida, lo cual puede provocar el TypeError al acceder a axios.get.

    Para solucionar este problema, cambia la declaración de importación a:

    import axios from "axios";

    Esto importará correctamente el módulo axios desde el paquete axios, permitiendo utilizarlo correctamente en el código.

    Además, hay un problema con la función setCustomerOrders dentro del bloque .then de axios. El operador de propagación (spread operator) se usa incorrectamente y debe estar envuelto en corchetes cuadrados para agregar los nuevos datos del pedido a los pedidos del cliente existentes. El código correcto debería ser:

    setCustomerOrders([...customerOrders, response.data]);

    Esto asegurará que los nuevos datos del pedido se concatenen correctamente con la matriz de pedidos del cliente existente.

    Una vez realizados estos cambios, la llamada GET de axios debería funcionar correctamente y el error debería resolverse.

Comments are closed.