时间戳

首页 > 解决方案 > 反应 this.state.bottles.map 不是一个函数

javascript - 反应 this.state.bottles.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>
    )
  }
}

我在渲染中有一个控制台日志，它似乎渲染了两个不同的项目。我的猜测是 axios 请求完成之前的状态，也许吧？但我不知道如何纠正这一点。

如果我检查我的控制台，我会看到两件事正在输出......

[]
{data: Array(20)}

谁能帮我弄清楚这里发生了什么？这里有点困惑。

标签： javascriptreactjs

解决方案

看起来您的 API 没有像您预期的那样返回一个数组，而是一个对象，即您在控制台中看到的那个。所以只需更改： const bottles = res.data;toconst bottles = res.data.data;它应该可以工作。

推荐阅读