在 reactjs 中渲染对象

Question

我有 symfony rest api，我正在为此编写一些前端（第一次使用 react）。所以，这是我的 index.js：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visits: []
        };
    }

    componentDidMount() {
        const url = 'http://localhost/app.php/api/visits?from=2017-05-05&to=2017-05-08';
        axios.get(url)
            .then(response => response.json())
            .then(
                visits => this.setState({visits})
            ).catch(err => err)
    }

    render() {
        return (
            <div>
                <ul>
                    {this.state.visits.map((visit, index) => <li key={index}>{visit}</li>)}
                </ul>
            </div>
        )
    }
}
const app = document.getElementById('app');
ReactDOM.render(<App/>, app);

来自 api 的响应如下：

{
    "2017-05-05":  2,
    "2017-05-06":  8,
    "2017-05-07": 10,
    "2017-05-08":  1,
}

我如何遍历它并将其打印到屏幕上？ 现在我没有收到任何错误，只是从服务器获得响应，但屏幕上没有任何内容。

问候

Answer 1

它不是任何array，它是object，所以直接map 将不起作用。首先，我们需要使用Object.keys() 来获取array 中的所有键，然后使用map。

像这样：

render() {
    let visits = this.state.visits;
    return (
        <div>
            <ul>
                {Object.keys(visits).map((visit, index) => <li key={index}>{visit} : {visits[visit]}</li>)}
            </ul>
        </div>
    )
}

Object.keys: 将返回该object 的所有键的array。

检查工作的sn-p：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visits: []
        };
    }

    componentDidMount() {
        this.setState({
           visits: {
              "2017-05-05":2,
              "2017-05-06":8,
              "2017-05-07":10,
              "2017-05-08":1
            }
        })        
    }

    render() {
      let visits = this.state.visits;
      return (
        <div>
            <ul>
                {Object.keys(visits).map((visit, index) => <li key={index}>{visit} : {visits[visit]}</li>)}
            </ul>
        </div>
    )
  }
}
const app = document.getElementById('app');
ReactDOM.render(<App/>, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>