Блог

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

Вот мой код reactjs:

     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
  

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

 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