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()时，它会尝试执行 amap但是，由于字符串不包含这样的方法，它会失败。该解决方案应该足以更改您在构造函数中的声明：

    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