Tengo un problema con la obtención de datos desde el backend. cuando trato de procesar datos desde el backend, tengo el error
Portfolio.js:34 Uncaught TypeError: Cannot read properties of undefined (reading 'self') at Portfolio.render (Portfolio.js:34:1) at finishClassComponent (react-dom.development.js:17485:1) at updateClassComponent (react-dom.development.js:17435:1) at beginWork (react-dom.development.js:19073:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22776:1) at workLoopSync (react-dom.development.js:22707:1)El código
import React, { Component } from 'react' import { Card } from 'react-bootstrap' import { Row } from 'react-bootstrap' import { MDBCard, MDBCardImage, MDBCardBody, MDBCardTitle, MDBCardText, MDBRow, MDBCol, MDBContainer, MDBRipple, MDBCardOverlay, MDBCardLink } from 'mdb-react-ui-kit'; import axios from 'axios'; import { ThemeConsumer } from 'react-bootstrap/esm/ThemeProvider'; export default class Portfolio extends Component { constructor(props){ super(props); this.state={ photoAlboums:[] }; } componentDidMount(){ axios.get("http://localhost:8081/api/photo-albums/1") .then((response) => { this.setState({photoAlboums: response.data}); }) } render() { return ( <div> <p>{this.state.photoAlboums._links.self.href}</p> </div> ) } }Los datos
{"id":1,"name":"Photo studio","_links" :{"self":{"href":"http://localhost:8081/api/photo-albums/1"}, "photoAlbums":{"href":"http://localhost:8081/api/photo-albums/list"}}}Pero cuando represento el nombre de los datos, todo funciona. ¿Cómo resolver este problema? ¡Gracias!
El problema aquí es que está tratando de obtener datos de una matriz como un objeto. necesitará actualizar su código para poder tomar los elementos de la matriz. vea el ejemplo a continuación.
Cambia tu código a:
{this.state.photoAlboums.length > 0 && this.state.photoAlboums.map((photo) => { <div> <p>{photo._links.self.href}</p> </div> } )También revise sus errores tipográficos.