如何使用 react.js 从 RESTAPI 获取数据

Question

The data in the API looks like this:

[
  { "lon": "4,483792", "lat": "51,917029" },
  { "lon": "4,483792", "lat": "51,919029" },
  { "lon": "4,483892", "lat": "51,929029" },
  { "lon": "4,484892", "lat": "51,931029" },
  { "lon": "4,423892", "lat": "51,919400" },
  { "lon": "4,438892", "lat": "51,915322" },
  { "lon": "4,483092", "lat": "51,917500" },
  { "lon": "4,403892", "lat": "51,925029" }
]

How can i retrieve these data to my react app?

I have something like this right now (I know it's wrong):

import React, { Component } from 'react';

class Test3 extends Component {
    state = {
        loading: true,
        coordinates: null,
    }

    async componentDidMount() {
        const url = "https://ttr.vsbbn.nl:4000/gps_history?team_id=1";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ coordinates: lon, loading: false });
    }

    render() {
        return(
            <div>
                {this.state.loading || !this.state.coordinates ? (
                    <div>loading...</div>
                ) : (
                    <div>
                        <div>{this.state.lon}</div>
                    </div>
                )}
            </div>
        )
    }
}

export default Test3;

Answer 1

You almost got the good code ! As mentionned you need to set your state with the right data piece named data :

const data = await response.json();
this.setState({coordinates: data, loading: false });

Now you can iterate through your data with map() method

import React, { Component } from 'react';

class Test3 extends Component{
    state = {
        loading: true,
        coordinates: null,
    }

    async componentDidMount(){
        const url = "https://ttr.vsbbn.nl:4000/gps_history?team_id=1";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({coordinates: data, loading: false });

    }

    render(){
        const { loading, coordinates } = this.state
        return(
            <div>
                {loading || !coordinates ? (
                    <div>loading...</div>
                ) : (
                    <div>
                        {coordinates.map((coordinate, index) => {
                             return (
                               <div key={index}>
                                 <p>Longitute: {coordinate.lon}</p>
                                 <p>Latitude: {coordinate.lat}</p>
                               </div>
                             )
                         })}
                    </div>
                )}

            </div>
        )
    }

}

export default Test3;

Answer 2

You have to use map() to fetch data from the array.

this.state.coordinates.map( (item, index) => {
   return <div>
             <h3>The first group {index}</h3>
             <li>lon: {item[index]['lon']</li>
             // Make same to all
          </div>
}