Al intentar obtener valores en un componente de clase, recibo el siguiente error. Aquí estoy tratando de obtener datos de una API Gateway. El objetivo es elegir cada atributo de la respuesta JSON y mostrarlos en una tabla dinámica de interfaz.
¿Puede alguien por favor ayudarme a arreglarlo? Gracias
Error:
TypeError: Cannot read properties of undefined (reading 'map')Código:
import React, {Component} from 'react' import axios from '../../axios' export default class users extends Component { constructor(props) { super(props); this.state = { data: [] }; } getUsersData() { axios .post(`/`, { ParentId: 'ou-wmno-yeeol4ok' }) .then(res => { const data = res.data; const users = data.Accounts.map(u => <div> <p>{u.Id}</p> </div> ) this.setState({ users }) }) .catch((error) => { console.log(error) }) } componentDidMount(){ this.getUsersData() } render() { return ( <div> {this.state.users} </div> ) } }Datos JSON como respuesta API:
{ "Accounts": [ { "Id": "2556", "Arn": "arn:aws:organizations::2556:account/ooabc/2556", "Email": "2556@aws.test.aws", "Name": "test-account", "Status": "SUSPENDED", "JoinedMethod": "CREATED", "JoinedTimestamp": "2021-07-13T14:58:23.197000+00:00" }, ], "ResponseMetadata": { "RequestId": "131462d1-47b2-4c19-aed0-8a30fb6859bd", "HTTPStatusCode": 200, "HTTPHeaders": { "x-amzn-requestid": "131462d18a30fb5959bd", "content-type": "application/x-amz-json-1.1", "content-length": "3527", "date": "Mon, 13 Sep 2021 15:42:52 GMT" }, "RetryAttempts": 0 } }gracias a todos, creo que lo descubrí usando JSON Parser.
getUsersData() { axios .post(`/`, { ParentId: 'ou-wmno-yeeol4ok' }) .then(res => { const data = res.data const valuesArray = JSON.parse(data) console.log(valuesArray) const users = valuesArray.Accounts.map(u => <tr key={u.Id}> <td>{u.Name}</td> <td>{u.Arn}</td> <td>{u.Id}</td> <td>{u.Email}</td> <td>{u.JoinedMethod}</td> <td>{u.JoinedTimestamp}</td> <td>{u.Status}</td> </tr> ) this.setState({ users }) }) .catch((error) => { console.log(error) }) }por lo general, la obtención de datos se realiza mediante el método "get" y no con el método "post"