Question

我有一个简单的React组件，它通过Monzo API提取一些数据然后我只想在屏幕上打印出来。我可以看到我通过React dev工具获取了正确的数据，并且它设置了状态，但是我的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>

使用React显示状态

1 个答案: