不能在Untappd Business API的数组上使用.map（）

Question

我正在使用unTappd API为网站创建一个点按列表。我已经使用axios来获取数据并将其存储在状态中。到目前为止，我已经能够连接到api并使用该条件显示数据。条件返回true并且我能够显示brewery.name但是一旦我添加.map它显示未定义。我已经检查过，brewery.items很简陋，所以我不确定是什么意思。这是console.log的输出

Object
created_at : "2016-12-24T03:46:21.229877Z"
description : ""
id :39418
items : (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
menu_id : 10416
name : "Beer List"
position : 0
public : true
type : "Section"
updated_at : "2018-09-03T21:55:14.232759Z"
__proto__ : Object

物品对象的输出：

Array(13)
0
:
{id: 6101131, section_id: 39418, position: 0, untappd_id: 2638818, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
1
:
{id: 4449771, section_id: 39418, position: 1, untappd_id: 2465457, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
2
:
{id: 6908154, section_id: 39418, position: 2, untappd_id: 801790, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-801790_dd500_sm.jpeg", …}
3
:
{id: 5356739, section_id: 39418, position: 3, untappd_id: 1238244, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-1238244_5ba42_sm.jpeg", …}
4
:
{id: 8086786, section_id: 39418, position: 4, untappd_id: 2719716, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
5
:
{id: 7623610, section_id: 39418, position: 5, untappd_id: 2791052, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2791052_0985c_sm.jpeg", …}
6
:
{id: 5882390, section_id: 39418, position: 6, untappd_id: 1238253, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-1238253_bf376_sm.jpeg", …}
7
:
{id: 7723598, section_id: 39418, position: 7, untappd_id: 2800225, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
8
:
{id: 7975683, section_id: 39418, position: 8, untappd_id: 2707563, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
9
:
{id: 7548213, section_id: 39418, position: 9, untappd_id: 2767218, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
10
:
{id: 7975604, section_id: 39418, position: 10, untappd_id: 2820742, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
11
:
{id: 7777162, section_id: 39418, position: 11, untappd_id: 2587293, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2587293_49972_sm.jpeg", …}
12
:
{id: 7777158, section_id: 39418, position: 12, untappd_id: 2681664, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2681664_e47db_sm.jpeg", …}
length
:
13

这是我正在使用的组件：我只是为测试目的设置了条件。如果我要删除啤酒地图，页面运行正常并显示菜单名称。

我很困惑我在这里做错了映射这个功能。我之前遇到了麻烦，这就是我在响应中映射部分的原因。任何想法都会有所帮助！

import { Component } from "react";
import axios from 'axios';

class Untappd extends Component {

    constructor(){
        super();

        this.state = {
            brewery: []
        }
    }

    componentWillMount() {
        axios({
            method:'get',
            url:'https://business.untappd.com/api/v1/menus/10416?full=true',
            headers: {
                "authorization": "Basic UN_API_KEY_HERE"
            }
          }) 
        .then(res => {
            let section =  res.data.menu.sections.map((section, index) => {
                return section
            });
            this.setState({ brewery: section["0"] });

            console.log(this.state.brewery);
        });
     }

    render() {

       const { brewery } = this.state

       const beers = brewery.items.map((beer, index) => {
            <li key={index}>{beer.id}</li>
       })

        return(
            <div>
                <h1>{brewery && <h1 style={{zIndex: "9999",position: "absolute", color: "red"}}>{brewery.name}</h1>}</h1>
                <ul>{beers}</ul>
            </div>
        )
    }
}

export default Untappd;

Answer 1

你没有在你的brewery.items.map电话中退回任何东西

 const beers = brewery.items.map((beer, index) => {
   // this will not return
   <li key={index}>{beer.id}</li>
 });

你应该这样做以返回你的<li />。 （或者您可以在匿名函数中使用显式的return语句）

const beers = brewery.items.map((beer, index) => (
  <li key={index}>{beer.id}</li>
));

Answer 2

在地图内我们可能要返回li。

const beers = brewery.items.map((beer, index) => (
  return <li key={index}>{beer.id}</li>
));

Answer 3

这是我更新后的代码，在考虑它之后会更加努力。现在我有我需要的点击列表。唯一的问题是它在页面完全呈现后的第二秒才加载。任何人都有任何可能导致这种情况的想法？

import { Component } from "react";
import axios from 'axios';

class Untappd extends Component {

    constructor(){
        super();

        this.state = {
            brewery: []
        }
    }

    componentDidMount() {
        axios({
            method:'get',
            url:'https://business.untappd.com/api/v1/menus/10416?full=true',
            headers: {
                "authorization": "Basic AUTH_TOKEN_HERE"
            }
          }) 
        .then(res => {
            let items = res.data.menu.sections["0"].items.map((items)=>{
                return items
            })
            this.setState({ brewery: items });
        });
     }

    render() {

        const { brewery } = this.state

        const beers = brewery.map((beer, index) => {
            return(
                <li key={index}>{beer.name}</li>
            );
        });

        console.log(brewery)

        return(
            <div>
                <h1>Beer List</h1>
                <ul>{beers}</ul>
            </div>
        )
    }
}

export default Untappd;