Данные от Ax ios возвращаются неопределенными React - PullRequest
Новая
       8

Данные от Ax ios возвращаются неопределенными React

0 голосов
/ 15 января 2020

Мой запрос GET с топором ios возвращает обратно неопределенное значение в моей консоли. Все мои конечные точки хороши и работают после тестирования с почтальоном. Мое начальное состояние go от домашних животных: [] для домашних животных: "". Я думаю, что именно так у меня установлена ​​функция asyn c await для получения данных ответа. Вот код компонента GET 

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

export default class ListPets extends Component {

  constructor(props) {
    super(props);
    this.state = {
      pets: [],
      isLoaded: false,
    }
  }

  componentDidMount = () => {
    this.getPets();
  };

  getPets = async() => {
    const res = await axios.get('http://localhost:5000/pets/');
    const pets = res.data;
    this.setState({
      isLoaded: true,
      pets: pets
    });
    console.log('Data has been received!');
    console.log(pets.data)
    return pets;
  }

  render() {
    console.log('State: ', this.state);
    const {
      isLoaded,
    } = this.state;

    if (!isLoaded) {
      return <div> Loading... </div>;
    } else {
      return (<div></div>);
    }
  }
}

app.get('/pets', function(req, res){
const resultArray = [];
client.connect(err => {
    assert.equal(null, err);
    console.log("Connected successfully to server");
    const db = client.db(dbName);
    const cursor = db.collection('pet').find({});
iterateFunc = (doc,err) => {
        assert.equal(null, err);
        resultArray.push(doc);
        console.log(JSON.stringify(doc, null, 4));
        if(err) {
            console.log(err)
    }
    }
        cursor.forEach(iterateFunc);
        client.close();
        res.render('index', {pets: resultArray});

  });

});

1 Ответ

0 голосов
/ 15 января 2020

Ваш код может отображать только сообщение о загрузке, но если проблема заключается в пустой строке, то я предполагаю, что ваш API возвращает пустую строку.

Вот ваш код, слегка модифицированный, но работающий с JSONPlaceholder API: https://codesandbox.io/s/compassionate-faraday-h9xpg

export default class ListPets extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pets: [],
      isLoaded: false
    };
  }

  componentDidMount = () => {
    this.getPets();
  };

  getPets = async () => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/todos");
    const pets = res.data;
    this.setState({ isLoaded: true, pets: pets });
  };

  render() {
    const { isLoaded, pets } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    }
    return <>{pets && pets.map(pet => <div key={pet.id}>{pet.title}</div>)}</>;
  }
}
...