0

Hola soy medio nuevo en React y estaba intentando hacer una aplicacion la cual se conecte con mi api pero me sale este error "TypeError: this.state.posts.map is not a function" y la linea que me dice que esta mal es la que guarda los datos en el state

import React, { Component } from 'react'

export default class Posts extends Component {

    state = {
        posts: []
    }

    async componentDidMount(){
        const res = await fetch('http://localhost:8000/posts')
        const data = await res.json();
        this.setState({posts: data})
    }

    render() {
        return (
            <div>
                <h1>Posts</h1>
                {
                    this.state.posts.map(post => {
                        return <div key={post._id}>
                            <h3>{post.title}</h3>
                        </div>
                    })
                }
            </div>
        )
    }
}

El error que me sale esta en la linea donde dice this,setState({posts: data})

2
  • 3
    Creo que (A) El error está en el método render, donde llamas a this.state.posts.map, y (B) La respuesta del fetch no es un array, sino un objeto, por lo que no tienes el método map presente Commented el 10 dic. 2019 a las 8:48
  • Yo creo que es la B Commented el 15 dic. 2019 a las 0:00

1 respuesta 1

1

Tienes que declarar el state en el this.

Cambia:

state = {
  posts: []
}

Por:

constructor()
{ 
  this.state = {
    posts: []
  };
}

Codigo completo:

import React, { Component } from 'react'

export default class Posts extends Component {

    constructor()
    { 
      this.state = {
        posts: []
      };
    }

    async componentDidMount(){
        const res = await fetch('http://localhost:8000/posts')
        const data = await res.json();
        this.setState({posts: data})
    }

    render() {
        return (
            <div>
                <h1>Posts</h1>
                {
                    this.state.posts.map(post => {
                        return <div key={post._id}>
                            <h3>{post.title}</h3>
                        </div>
                    })
                }
            </div>
        )
    }
}
3
  • Intente el modo que pusiste pero me sigue saliendo el mismo error
    – ezequiel
    Commented el 11 dic. 2019 a las 23:55
  • Intenta agregar super(); antes del this.state = { posts:[] } y me dices.
    – Einer
    Commented el 12 dic. 2019 a las 12:18
  • El estado puede ser declarado fuera del constructor asi que ese no es el problema. Commented el 14 dic. 2019 a las 23:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.