отображение собранных данных из mongodb с помощью axios в реагирующих - PullRequest
Новая
       14

отображение собранных данных из mongodb с помощью axios в реагирующих

1 голос
/ 29 марта 2019

Я новичок в MERN и пытаюсь отобразить данные из коллекции mongodb с помощью axios.Я пытаюсь отобразить список городов на веб-странице.Я не уверен, если я делаю это, напишите.Должен ли я использовать супер-состояние? Json почтальон

Вот мой код реагирования: 

    import React, { Component } from 'react';
import axios from 'axios';

export class Cities extends Component {
constaractor(state) {

  state = {
  locations:[]
  };
}

  componentDidMount() {
    axios.get('/cities')
    .then(cities => console.log(cities.data))
    .catch(e => console.log(e))
  }
  render() {
    const cities=this.state.locations.map(location => (
      <div key={location._id}>
     <h1>{location.city}</h1>
      <p>{location.contry}</p>
        <h1>Cities</h1>
      </div>
    ));

    return (
      <div className="Cities">
        {cities}
      </div>
    );
  }
}

export default Cities

1 Ответ

0 голосов
/ 29 марта 2019

Вы должны помнить, чтобы установить состояние, как только вы получите данные из своего источника данных. 

import React, { Component } from 'react';
import axios from 'axios';

export class Cities extends Component {
constaractor(state) {

  state = {
  locations:[]
  };
}

  componentDidMount() {
    axios.get('/cities')
    .then(({ data}) => this.setState({ locations: data })) // <-- set state
    .catch(e => console.log(e))
  }
  render() {
    const cities=this.state.locations.map(location => (
      <div key={location._id}>
     <h1>{location.city}</h1>
      <p>{location.country}</p> // <-- you had a typo here
        <h1>Cities</h1>
      </div>
    ));

    return (
      <div className="Cities">
        {cities}
      </div>
    );
  }
}

export default Cities
...