为什么会出现这个错误？ users.map 不是函数答案

【问题标题】：Why this error arising? users.map is not a function为什么会出现这个错误？ users.map 不是函数
【发布时间】：2020-09-01 19:43:19
【问题描述】：

我正在尝试使用 Axios 从 API 呈现名称。即使我可以在控制台中看到所有数据，但由于显示错误而无法呈现：

users.map 不是函数

下面我将分享我的文件代码。我很新，这可能是我无法弄清楚的原因。

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import { Container, Table} from "react-bootstrap";
import axios from 'axios';

class App extends React.Component {
    state = {
        users: [],
    };

    componentDidMount () {
        axios.get('https://5w05g4ddb1.execute-api.ap-south-1.amazonaws.com/dev/profile/listAll')
            .then(response => {
                const users = response.data;
                this.setState({ users });
                console.log(this.state.users);
            })
    }

    render() {
        const { users } = this.state;
        return (
        <div className="App">
              <Container fluid>
                  <Table striped bordered hover size="sm">
                      <thead>
                      <tr>
                          <th><div id="">Image</div></th>
                          <th>Name</th>
                          <th>Gender</th>
                          <th>Age</th>
                          <th>Date</th>
                          <th>Status</th>
                      </tr>
                      </thead>
                      <tbody>

                      <tr>
                          { users.map(user => { return <td key={user.id}>{ user.name }</td> }) }

                      </tr>
                      </tbody>
                  </Table>
              </Container>
        </div>
      )
}
}

export default App;

【问题讨论】：

因为您请求的响应是一个对象，而不是一个数组。看起来您需要将状态设置为响应的 list 属性。

标签： javascript reactjs react-native react-redux axios

【解决方案1】：

你得到的响应不是一个数组，而是一个像这样的对象：

{"list":[{"id":"MnJJA0dbuw","name":"Anand Sharma","img":"https://incablet-tests.s3.ap-south-1.amazonaws.com/conference-content/photos/sponsors/Anand.jpeg","gender":"m","age":46,"date":"23/11/2019","status":"onboarded"}]}

您可以通过将const users = response.data; 替换为const users = response.data.list; 来访问该数组

【讨论】：

不正确。 response.data是到达axios响应中的数据，然后访问响应对象中的列表项。

【解决方案2】：

在你的 axios get 中，在“then”部分改行：

const users = response.data;

收件人：

const users = response.data.list;

【讨论】：

【解决方案3】：

快速破解

{users.list.map(user => { return <td key={user.id}>{ user.name }</td> }) }

【讨论】：

【解决方案4】：

有2个错误：

来自 api 的响应不是一个列表而是一个对象，你需要去 response.list 使用响应中的列表应该是

const users = response.data.list

你的

this.setState({users})

，你需要把它改成

this.setState({users:<VARIABLE_NAME_TO_HOLD_USER_DATA>})

即使你写的东西在 ES6 中也是有效的，这在某种程度上是个坏主意，不清楚你在做什么，只需定义你想要复制到你的组件状态的内容

【讨论】：

感谢@GabrielPetersson，我才知道，刚刚编辑了我的答案