Не могу использовать .map () для массива из Untappd Business API

Question

Я работаю с API unTappd для создания списка переходов для веб-сайта. Я использовал axios, чтобы получить данные и сохранить их в состоянии. До сих пор я был в состоянии подключиться к API и отображать данные с этим условным. Условие возвращало значение true, и я смог отобразить имя brewery.name, но после добавления .map оно показывало undefined. Я проверил и 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

на карте нам, возможно, придется вернуть li.

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

Answer 2

Вот мой обновленный код, который работает, если немного подумать об этом. Теперь у меня есть список касаний, который мне нужен. Единственная проблема заключается в том, что он не загружается в течение секунды после полной визуализации страницы. У кого-нибудь есть идеи, что может вызвать это?

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;

Answer 3

Вы ничего не возвращаете в своем 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>
));