Javascript React this.state.labels.map不是一个函数

我现在有一个React组件，它将列出几瓶酒。我遇到了一个问题，虽然我的组件状态被返回，但我仍然无法映射它

import React, { Component } from "react";
import Table from 'react-bootstrap/Table'
import Layout from '../../components/layout'
import axios from 'axios';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default class Bottles extends Component {
  constructor(props) {
    super(props)
    this.state = { bottles: [] }
  }

  componentDidMount() {
    axios.get(`http://localhost:3000/api/v1/bottles`)
      .then(res => {
        const bottles = res.data;
        this.setState({ bottles });
      })
      .catch(function (error) {
        console.log(error);
      })
  }

  render() {
    return (
      <Layout css={{ padding: 0 }} pageTitle="Bottles">
        <ul>
          { console.log(this.state.bottles) }
          { this.state.bottles.map(bottle => <li>{bottle.id}</li>)}
        </ul>
      </Layout>
    )
  }
}

---

有人能帮我弄清楚这是怎么回事吗？这里有点混乱。

看起来您的API并没有像您预期的那样返回数组，而是返回一个对象，即您在控制台中看到的对象。所以只要改变一下：

---

const瓶=res.data到<代码>常数瓶=res.data.data，它应该可以工作。
看起来您的API并没有像您预期的那样返回数组，而是返回一个对象，即您在控制台中看到的对象。所以只要改变一下：
const瓶=res.data到<代码>常数瓶=res.data.data
应该可以工作。
因为您在日志记录中获得了
{data:Array（20）}
，这意味着您在对象而不是数组上循环

在
componentDidMount
中，您需要设置
res.data.data
而不是
res.data
，例如

axios.get(`http://localhost:3000/api/v1/bottles`)
      .then(res => {
        const bottles = res.data.data;
        this.setState({ bottles });
      })
      .catch(function (error) {
        console.log(error);
      })

我希望这能解决问题。
因为您在日志
this.state.labels
中获得了
{data:Array（20）}
，这意味着您在对象而不是数组上循环

在
componentDidMount
中，您需要设置
res.data.data
而不是
res.data
，例如

axios.get(`http://localhost:3000/api/v1/bottles`)
      .then(res => {
        const bottles = res.data.data;
        this.setState({ bottles });
      })
      .catch(function (error) {
        console.log(error);
      })

我希望这能解决这个问题。
我有两个假设：1。响应需要再展开一级-为此，请将
const瓶=res.data
更改为
const瓶=res.data.data
或2。每个瓶子都没有id，所以它是一个空元素。我的两个假设是1。响应需要再展开一级-为此，请将
const瓶=res.data
更改为
const瓶=res.data.data
或2。没有每个瓶子项目的id，所以它是一个空元素。好了。非常感谢。谢谢你，克里斯蒂安。啊，我们开始了。非常感谢。谢谢你，克里斯蒂安。