Отображение данных в таблице пользовательского интерфейса материала с помощью метода get для приложения React

  • Я новичок в React.
  • Я могу отобразить компонент таблицы с данными жесткого кода.
  • Но прямо сейчас у меня есть все данные в table.json.
  • Можете ли вы сказать мне, как получить значения из table.json, используя запрос axios get и отобразить в таблице?
  • Было бы здорово, если бы вы дали мне знать, чтобы в будущем я мог работать с запросами API.
  • Предоставляю мой стек и код ниже.

https://stackblitz.com/edit/react-redux-realworld-sqwnsm?file=components/Sports/index.js

class EnhancedTable extends React.Component {
  state = {
    id: 1,
    order: 'asc',
    orderBy: 'order',
    selected: [],
    data: [
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
    ],
    page: 0,
    rowsPerPage: 5,
  };

json data

[
  {
    "name": "Cupcake",
    "shortname": "shortname",
    "description": "hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh",
    "order": "1",
    "code": "code",
    "status": "active"
  },
  {
    "name": "Cupcake2",
    "shortname": "shortname2",
    "description": "hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh",
    "order": "1",
    "code": "code",
    "status": "active"
  }
]
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
7 298
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот полный пример использования fetch (вместо axios) для отправки запроса на получение https://randomuser.me/

import React, { Component } from 'react';

class App extends Component {
  state = { users: [] };

  componentDidMount() {
    fetch('https://randomuser.me/api/?results=10&nat=us')
      .then(results => results.json())
      .then(data => {
        const users = data.results;
        this.setState({ users });
      }).catch(err => console.info(err))
  }

  render() {
    return (
      <div>
        {this.state.users.map((user, index) => {
          return (
            <div key = {index}>
              <div>{user.name.first}</div>
              <img src = {user.picture.thumbnail} alt = "" />
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

А вот ссылка на рабочий пример: https://stackblitz.com/edit/react-azxxut

спасибо за ответ ... можете ли вы обновить мой код ... это так запутанно :(

user10509524 26.10.2018 03:34

эй, есть ли какой-нибудь образец api для вставки случайного api ... так как мне нужно проверить, чтобы поставить

user10509524 24.11.2018 14:08

Можете ли вы продемонстрировать установку в мою песочницу ... это так запутанно :(

user10509524 24.11.2018 22:50

не могли бы вы помочь :(

user10509524 25.11.2018 00:49

эй, но я не вижу в этом поста

user10509524 25.11.2018 16:47

Другие вопросы по теме