Hago una llamada a una API que me devuelve una coleccion de objetos JSON y quiero meter estos objetos en el estado del componente.
He probado varias aparentes soluciones y no me ha funcionado ninguna. El caso es que he logueado el estado cuando el componente se carga y es efectivamente un array:
async componentDidMount(){
axios.get(`https://c6tdkwn8v7.execute-api...`)
.then((res) => {
const gallery = JSON.stringify(res.data);
this.setState({
galleries: gallery
})
console.log(this.state.galleries)// Devuelve:
[{"name":"Miami","coordinates":[25.7616798,-80.1917902],"id":3},{"name":"Seattle","coordinates":[47.6062095,-122.3320708],"id":2},{"name":"Nueva York","coordinates":[40.7127753,-74.0059728],"id":1}]
}
Pero cuando intento renderizarlo me dice this.state.galleries.map is not a function
:
{this.state.galleries.map((item, key) =>
<li item={item.name} key={item.id} />
)}
Añado Código completo:
export default class UserGallery extends Component {
state = {
authenticatedUser: "",
galleries: []
}
async componentDidMount() {
const session = await Auth.currentSession();
const userEmail = session.idToken.payload.email
axios.get(`https://c6tdkwn8v7.execute-api...`)
.then((res) => {
const gallery = JSON.stringify(res.data);
this.setState({
galleries: gallery
})
console.log(this.state.galleries)
})
}
renderSites = () => {
if(this.state.galleries.length > 0 ) {
return this.state.galleries.map(site => (
<div className="added-items-container">
<Container className="bg-dark text-white card-site">
<Row>
<Col sm={8}>
<p>
Viaje a {site.name}
<br />
Fuiste el 13 de Marzo al 19 Marzo de 2012
</p>
</Col>
<Col><Image src={italyPic} height="70px" rounded alt="Card image" />
</Col>
</Row>
</Container>
</div>
))}
return null
}
render() {
return (
<div className="usergallery-container">
<Container>
<Row>
<Col className="search-gallery-col-1">
<Container className="search-gallery-container">
<Form>
<h4>Busca una galeria </h4>
<Row>
<Col className="search-gallery-form" sm={8}>
<Form.Control type="text" placeholder="ejemplo: Madrid, New York...etc" />
</Col>
<Col sm={2}>
<Button variant="primary" type="submit" variant="success">Buscar</Button>
</Col>
</Row>
</Form>
{this.renderSites()}
</Container>
</Col>
<Col className="search-gallery-col-2" xs={7}>
<h4>Ultimo añadido</h4>
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src={brazilPic}
alt="First slide"
/>
<Carousel.Caption>
<h3>Viaje a Brasil</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src={francePic}
alt="Third slide"
/>
<Carousel.Caption>
<h3>Viaje a Francia</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src={italyPic}
alt="Third slide"
/>
<Carousel.Caption>
<h3>Viaje a Italia</h3>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</Col>
</Row>
</Container>
</div>
)
}
}
Edito: Acabo de hacer typeof
y me dice que es una string. Lo he convertido a array añadiéndole JSON.parse(x) pero sigue sin funcionar
{this.state.galleries.map((item, key) => <li item= {item.name} key={item.id} /> )}
en el codigo completo que publicaste. Donde lo tienes?