Отображение данных в таблице пользовательского интерфейса материала с использованием метода get для приложения реакции - PullRequest
Новая
       44

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

0 голосов
/ 25 октября 2018
  • Я новичок в React.
  • Я могу отобразить компонент таблицы с данными жесткого кода.
  • Но сейчас у меня есть все данные в table.json.
  • Можете ли вы сказать мне, как извлечь значения из table.json, используя axios get request и отобразить в таблице?
  • Было бы замечательно, если вы дадите мне знать, чтобы в будущем я мог работатьпо запросам 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"
  }
]

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Stackoverflow - это не место, где люди могут решать ваш код, а задавать вопросы и получать разъяснения / объяснения.Просматривая свой профиль, вы в значительной степени просто задавали вопросы по SO и просили людей решить ваши проблемы за вас, несмотря на то, что большинство из них давали довольно подробные объяснения.

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

0 голосов
/ 26 октября 2018

Вот полный пример использования 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.log(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

...