Get und rendern Array aus Rest api, Reagieren

Question

Ich habe symfony Rest api und ich schreibe einige Frontend für dieses (1. Mal mit react). So, hier ist mein 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); 

Antwort von api wie folgt aussieht:

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

Wie kann ich durch das laufen und auf den Bildschirm drucken? Jetzt bekomme ich keine Fehler, nur Antwort vom Server bekommen, aber nichts auf dem Bildschirm.

Grüße

Answer 1

Sein nicht array, sein ein object so direkt map nicht daran arbeiten. Zuerst müssen wir Object.keys() verwenden, um alle Schlüssel in einem array zu erhalten, dann verwenden Sie map darauf.

So:

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: wird eine array aller Tasten des object zurückzukehren.

Überprüfen Sie die Arbeits Schnipsel:

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'/>