在reactjs中使用axios顯示來自mongodb的收集數據

Question

我是MERN的新手，我嘗試使用axios顯示mongodb集合中的數據。 我嘗試在網頁上顯示城市列表。 我不確定我是否正在寫。 應該怎樣使用超級狀態？JSON 郵遞員

這是我的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

Answer 1

從數據源獲取數據后，您必須記住要設置狀態。

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