时间戳

首页 > 解决方案 > React + Axios - 加载的数据能够控制台日志但未显示在 DOM 中？

reactjs - React + Axios - 加载的数据能够控制台日志但未显示在 DOM 中？

问题描述

我的简单 React 应用程序有问题。我可以使用 Axios 连接到 API 并且可以控制台日志。但是，我无法在 DOM 中输出数据。它是空的，为什么？ 

import React, { Component } from 'react';

import axios from 'axios';

class App extends Component {

    state = {
        fragrances: []
    }

    componentDidMount() {
        axios.get('http://localhost:1337/fragrances')
        .then(res => {
        const fragrances = res.data;
        this.setState({ fragrances });
        })
    }

    render() {
    const { fragrances }  = this.state;
        return (
        <div>
        {
            fragrances.map((fragrance, index) => {
                <h2>{fragrance.Name}</h2>
                console.log(fragrance);
            })
        }
        </div>
        );
    }
}

export default App;

标签： reactjsaxios

解决方案

你没有从你的map

它应该是

fragrances.map((fragrance, index) => { 
    return Boolean(fragrance.Name) && <h2 key={index}>{fragrance.Name}</h2>  
})

如评论中所述，您在返回组件列表时需要使用键。我在这里使用index，但这是一个不好的做法（阅读https://reactjs.org/docs/lists-and-keys.html#keys）。希望您的fragrance对象具有独特id性，这是您应该使用的。

推荐阅读