在React.js中使用axios显示来自mongodb的收集数据 [英] displaying collection data from mongodb using axios in reactjs

问题描述

我是MERN的新手，我尝试使用axios显示mongodb集合中的数据.我尝试在网页上显示城市列表.我不确定我是否正在写.我应该使用超级状态吗?json 邮递员

I am new to MERN and I try to display data from mongodb collection using axios. I try to display a list of cities on the web page. I am not sure if I am doing it write. Should I use super state?jsonpostman

这是我的reactjs代码:

Here is my reactjs code:

    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

推荐答案

从数据源获取数据后，您必须记住要设置状态.

You have to remember to set the state once you get data back from your data source.

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

这篇关于在React.js中使用axios显示来自mongodb的收集数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！