0
192
Viewsla propiedad 'fotos' no existe en el tipo 'Imagen []'
Estoy tratando de obtener una respuesta de pexels api para imágenes y lo que estoy tratando de hacer es llenar la matriz vacía de imágenes predeterminadas del objeto de fotos que obtengo de la respuesta.
import * as React from "react"; import { ChakraProvider} from "@chakra-ui/provider"; import {theme} from "@chakra-ui/theme"; import {Text,Box} from "@chakra-ui/react"; import axios from 'axios'; const App = () => { return ( <ChakraProvider theme={theme}> <Box> <Display/> </Box> </ChakraProvider> ); } export default App; interface Image { id:number, width:number, height:number, avg_color:string, liked:boolean, photographer:string, photographer_id:number, photographer_url:string, src:object, } const defaultImages : Image[] = []; function Display() { const [Images,setImages] : [Image[], (images: Image[]) => void] = React.useState(defaultImages); const [loading,isLoading] : [boolean,(loading: boolean) => void] = React.useState<boolean>(true); const [error,setError] : [string,(error: string) => void] = React.useState(""); React.useEffect(() => { axios.get<Image[]>('https://api.pexels.com/v1/curated?page=2&per_page=40', { headers: { Authorization : '563492ad6f91700***********************************' }, }).then(response => { setImages(response.data.photos); isLoading(false); console.log("it worked!",response.data.photos); }).catch(ex => { const error = ex.response.status === 404 ? 'Page not found':'Something wrong has happened'; setError(error); isLoading(false); console.log(error); }) },[]); return ( <Text></Text> ); } Obtengo los datos de respuesta muy bien, y la matriz de objetos se muestra en la consola cuando agrego el accesor '.photos' después de (response.data), pero recibo un error Uncaught (in promise) TypeError: ex.response is undefined
No entiendo cuál es el problema aquí. Intenté agregar una propiedad de matriz de 'fotos' explícitamente en la interfaz de imagen, pero sigo teniendo el mismo error.
1 answers
Answer question0
El Uncaught (in promise) TypeError: ex.response is undefined Error simplemente le dice que el objeto ex no tiene un campo de respuesta definido. No tiene nada que ver con su matriz de fotos, que está implementada correctamente.
Este es el resultado de su intento de acceder a la respuesta de su solicitud, que actualmente no está presente. Esto puede suceder, por ejemplo, si se realizó la solicitud, pero no se recibió ninguna respuesta del servidor.
Para asegurarse de verificar solo el código de error de la respuesta si está presente, envuelva su código en una declaración if para verificar si la respuesta está configurada.
Prueba esto:
}).catch(ex => { if(ex.response) { const error = ex.response.status === 404 ? 'Page not found':'Something wrong has happened'; setError(error); isLoading(false); console.log(error); } })Puede encontrar más ejemplos de manejo de errores en la documentación de axios .
Un pequeño consejo profesional de mi parte: llamar a su variable error en lugar de ex y cambiar el nombre de error a errorMessage hace que su código sea más fácil de leer y comprender.