使用 React 从状态显示属性

Question

我有一个简单的 React 组件，它通过 Monzo API 提取一些数据，然后我只想在屏幕上打印出来。我可以看到我正在通过 React 开发工具取回正确的数据，并且它正在设置状态，但是在我的 HTML 中没有打印任何内容。

这是我的组件：

import React, {Component} from "react";
import "./App.css";
import axios from "axios";

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            account: [{
                id: '',
                description: '',
                created: '',
                type: ''
            }]
        }
    }

    componentDidMount() {
        let config = {
            headers: {
                'Authorization': 'Bearer sampleToken'
            }
        };

        axios.get('https://api.monzo.com/accounts', config).then((response) => {
            this.setState({'account': response.data.accounts});
        });
    }

    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <h2>Hello {this.state.account.map(account =>
                        console.log(account),
                        <p>account.description</p>
                    )}</h2>
                </div>
                <p className="App-intro">
                    Monzo API app
                    {this.state.account.id}
                </p>
            </div>
        );
    }
}

export default App;

我的地图功能中的控制台日志首先显示一个空的帐户对象，然后显示一个填充的正确帐户对象，这可能是原因吗？

Answer 1

  <p>{account.description}</p>

而不是

 <p>account.description</p>