0
147
ViewsRecuperación de API en React
las capturas de pantalla adjuntas son el resultado de una búsqueda de API (base de datos de películas). A partir de estos resultados, como se muestra en las capturas de pantalla, estoy tratando de alcanzar "primaryImage.url", pero sigo obteniendo "No se pueden leer las propiedades de undefined (leyendo 'url').
Aquí está mi página:
const SearchPage = () => { const params = useParams(); const { query } = params; const [data, setData] = useState(null); const fetchData = () => { fetch(`${rapidApiUrl}/search/title/${query}${rapidSearchData}`, rapidApiOptions) .then((response) => response.json()) .then((data) => { setData(data.results); }) .catch((err) => console.error(err)); }; useEffect(() => { fetchData(); }, [query]); console.log(data) return ( <div> {data && data.map((media) => ( <div key={media.id}> {/* <img src={media.primaryImage.url} alt={media.titleText.text} /> */} <p>{media.titleText.text}</p> <p>{media.releaseYear.year}</p> </div> ))} </div> ); }; export default SearchPage; 
2 answers
Answer question0
A medida que recorre los datos, algunos de los valores de la imagen primaria son objetos que, de hecho, tienen una propiedad de URL, pero algunos de ellos son nulos. Al intentar encontrar la propiedad url de nulo, se produce un error. Probablemente desee verificar si la imagen primaria es nula y manejarla de manera diferente que si tuviera un valor.
0
El problema es primaryImage parece ser null en algunos casos. Debe usar el optional chaining para evitar los errores.
return ( <div> {data && data.map((media) => ( <div key={media.id}> <img src={media.primaryImage?.url} alt={media.titleText?.text} /> */} <p>{media.titleText.text}</p> <p>{media.releaseYear.year}</p> </div> ))} </div> ); Puede leer más sobre optional chaining aquí