5

Intentando mostrar datos en una vista en React Js, me he encontrado con un error que siguiendo los pasos del tutorial aun sigue persistiendo:

this.state.users.map is not a function

El código es el siguiente

import React, {Component} from 'react';
import {render} from 'react-dom';
import request from 'superagent';

class App extends Component{

    constructor(){
        super();
        this.state = {
            users: ""
        };
    }

    componentDidMount(){
        request.get('http://localhost:8080/api/usuarios')
        .end((err, res) => {
            const usuariosGet = JSON.parse(res.text).usuarios;
            this.setState({
                users: usuariosGet
            });
        });
    }

    render(){

        var mostrarUsuarios = this.state.users.map((usuario, i) => {
            return (<li key={i}>{usuario}</li>);
        });

        return(
            <div>                
                <h1>Hola Mundo React JS</h1>
                <ul>
                    {mostrarUsuarios}
                </ul>
            </div>
        )       
    }
}

export default App;

results

6
  • Y qué hay en usuariosGet? A lo mejor es un objeto y no un array
    – ffflabs
    el 23 feb. 2018 a las 18:16
  • ya coloco como queda de esa forma, un segundo el 23 feb. 2018 a las 18:17
  • @amenadiel asi queda, Array(2)0: Nombre: "Juan"__proto__: Object1: Nombre: "Isaac"__proto__: Objectlength: 2__proto__: Array(0) el 23 feb. 2018 a las 18:20
  • Probablemente render se ejecuta antes de que tengas datos, intentando invocar map en un string vacio. Prueba iniciandolo en []
    – Klaimmore
    el 23 feb. 2018 a las 18:30
  • @Klaimmore podrias revisar ahora que puse la imagen? el 23 feb. 2018 a las 18:51

3 respuestas 3

4

Lo que pasa es que cuando se monta el componente users no es un array sino una cadena. Cuando se llama a render() por primera vez intentará ejecutar un map pero, dado que los strings no contienen tal método, fallará. La solución debe bastar con cambiar tu declaración en el constructor:

this.state = {
    users: []
};


EDIT

Respecto al error que mencionas en el comentario, se debe a que lo que recibes está estructurado así:

[
    { Nombre: 'Juan' },
    { Nombre: 'Isaac' }
]

Es un arreglo de objetos con una propiedad Nombre. El error es que no puedes renderizar objetos así como así, debes seleccionar alguna de sus propiedades:

var mostrarUsuarios = this.state.users.map((usuario, i) => {
    return (<li key={i}>{usuario.Nombre}</li>);
});
6
  • ahora me dice esto, Uncaught Error: Objects are not valid as a React child (found: object with keys {Nombre}). el 23 feb. 2018 a las 18:32
  • ¿Cómo es la respuesta del servidor cuando haces la petición? el 23 feb. 2018 a las 18:41
  • Y edito la prgunta espera el 23 feb. 2018 a las 18:42
  • 1
    Puedes revisar ahora que esta la imagen? el 23 feb. 2018 a las 18:51
  • 1
    @PedroMiguelPimientaMorales con gusto, ya actualicé mi respuesta. Gracias por la marca! el 23 feb. 2018 a las 21:07
2

Me pasa lo mismo:


import React,{Component} from 'react';

class App extends Component {

  state = {

    empresas:[]

  }

  componentDidMount () { 

    fetch('http://localhost:3000/empresas.json')
    .then((respuesta) => respuesta.json())
    .then(empresas => this.setState({empresas}))

  }

  render(){

    return (

      <div>
        <h1>Mi select</h1>
        <ul>
          {this.state.empresas.map(empresa => (
            <li key={empresa.rut}>
              {empresa.razonsocial}
            </li>
          ))}
        </ul>
      </div>

    )

  }

}

export default App;
1
  • Es confuso el texto que compaña tu código, ¿esto es una respuesta o un comentario indicando que enfrentas el mismo error?
    – user128299
    el 14 abr. 2021 a las 22:53
1

Consulta:

Tiene que llamarse users:[]

O puede llamarse de otra forma, ej. empresas:[]

0

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.