Как получить данные JSON (API) с помощью axios и отобразить в списке / таблице?

Question

Мне удалось получить данные JSON с сервера (модуль mssql), но когда я попытался сделать запрос Axios, я не смог получить данные, чтобы отобразить их как компонент приложения.

Вот необработанные данные JSON от localhost: // 5000 (на стороне сервера). Я должен был поставить // ниже, потому что он не отображался должным образом в вопросе.

//{"recordsets":[[{"NAME":"TOM"},{"NAME":"RUBY"},{"NAME":"JANE"}, 
//{"NAME":"ALI"}, 
//{"NAME":"CELINE"},{"NAME":"JACK"}, 
//{"NAME":"KANE"},{"NAME":"BANE"}, 
//{"NAME":"DANNY"},{"NAME":"ROCK"}]],"recordset":[{"NAME":"TOM"}, 
//{"NAME":"RUBY"},{"NAME":"JANE"}, 
//{"NAME":"ALI"},{"NAME":"CELINE"}, 
//{"NAME":"JACK"},{"NAME":"KANE"}, 
//{"NAME":"BANE"},{"NAME":"DANNY"}, 
//{"NAME":"ROCK"}],"output":{},"rowsAffected":[10]}

//Here's the Result component code

import React from "react";
import PropTypes from "prop-types";


class Result extends React.Component {
  render() {
    const { name, isLoading } = this.props;

    const details = (
      <div>
        <h4>{name}</h4>
      </div>
    );

    const loadingMessage = <span>Loading...</span>;

    return (
      <div>
        {isLoading ? loadingMessage : details}
      </div>
    );
  }
}

Result.propTypes = {
  name: PropTypes.string,
  isLoading: PropTypes.bool
};

export default Result;


//App component code


import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import './App.css';
import Result from './component/Result';
import API from './routes/api/api'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      name: null
    };
  }

  render() {

    const { isLoading, name } = this.state;

    return (
      <div className="welcome">
        <h1>Welcome to the new RFQ System - BETA version 0.0.0</h1>

        <Result isLoading={isLoading} name={name} />
      </div>
    );

  }

  async componentDidMount() {
    try {
      let userData = await API.get('/', {
        params: {
          recordsets: 10, //number of results
          inc: 'NAME'
        }
      });

      // Parse the results for ease of use.
      userData = userData.data.recordsets[0][0];

      //Update state with new data and re-render our component.
      const name = userData.name;

      this.setState({
        ...this.state, ...{
          isLoading: false,
          name
        }
      });
    }
    catch (e) {
      console.log(`? Axios request failed: ${e}`);
    }
  };
}

export default App;

ReactDOM.render(<App />, document.getElementById('root'));

Я получаю только «Идет загрузка» на странице, а не фактические результаты.

Сейчас я просто хотел бы сначала отобразить данные, прежде чем помещать их в массив для вывода списка.

Answer 1

Я попытался запустить тот же код с помощью Axios, он успешно работал.Вот что я попробовал:

async componentDidMount() {
  try {
    let userData = await axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => res.data);

    userData = userData[0];

    //Update state with new data and re-render our component.
    const name = userData.name;

    this.setState({
      ...this.state,
      ...{
        isLoading: false,
        name
      }
    });
  } catch (e) { }
}

Я полагаю, что есть проблема с возвратом для вашего API.