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

item对象的输出：

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;

无法在Untappd Business API的数组上使用.map（）

3 个答案: