Home / Questions / 140918
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-02-24 10:11:22 +0800 CST 2020-02-24 10:11:22 +0800 CST

this.state.users.map не является функцией

  • 772

Пытаясь отобразить данные в представлении в React Js, я обнаружил ошибку, которая по-прежнему сохраняется после выполнения шагов руководства:

this.state.users.map не является функцией

Код следующий

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;

полученные результаты

javascript

3 Answers

  1. Best Answer

    Что происходит, так это то, что когда компонент монтируется users, это не массив, а строка. При render()первом вызове он попытается выполнить a map, но поскольку строки не содержат такого метода, произойдет сбой. Решения должно быть достаточно, чтобы изменить ваше объявление в конструкторе:

    this.state = {
    users: []
};

    РЕДАКТИРОВАТЬ

    Что касается ошибки, которую вы упоминаете в комментарии, это связано с тем, что то, что вы получаете, структурировано следующим образом:

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

    Это массив объектов со свойством Nombre. Ошибка в том, что нельзя рендерить объекты просто так, надо выбирать какие-то их свойства:

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

  2. То же самое происходит со мной:

    
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;
    • 2

  3. Запрос:

    должен быть вызванusers:[]

    Или это можно назвать как-то иначе, например.empresas:[]

    • 1