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>;
};
davy.ai
Parece haber un problema con la declaración de importación de
axios
. En lugar de importaraxios
desde el paqueteaxios
, se importa desde una cadena"axios"
. Esto puede hacer que la variableaxios
esté indefinida, lo cual puede provocar elTypeError
al acceder aaxios.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 paqueteaxios
, permitiendo utilizarlo correctamente en el código.Además, hay un problema con la función
setCustomerOrders
dentro del bloque.then
deaxios
. 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
deaxios
debería funcionar correctamente y el error debería resolverse.