it-swarm.com.ru

Как отобразить данные в таблице с помощью JSON в реагировать JS?

у меня есть JSON, как это

я хочу использовать этот JSON и отображать данные в таблице, используя реагировать JS.

вот как я отображаю данные из файла JSON.

import React, { Component } from 'react';
import data from './data.json';

class App extends Component {
  render() {
    return (
        <ul>
        {
          data.map(function(movie){
            return <li>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

как загрузить JSON из URL-адреса и отобразить его в таблице с помощьюactjs?

4
Ahmad

Вы можете извлечь JSON, как только компонент будет смонтирован, и когда вы в конечном итоге решите его, вы можете обновить состояние компонента:

import React, { Component } from 'react';


class App extends Component {
  // initially data is empty in state
  state = { data: [] };

  componentDidMount() {
    // when component mounted, start a GET request
    // to specified URL
    fetch(URL_TO_FETCH)
      // when we get a response map the body to json
      .then(response => response.json())
      // and update the state data to said json
      .then(data => this.setState({ data }));
  }


  render() {
    return (
        <ul>
        {
          this.state.data.map(function(movie){
            return <li key={movie.id}>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

Если вы не можете использовать fetch, вы можете использовать некоторые другие библиотеки, такие как superagent или axios . Или вы можете даже вернуться к доброму XMLHttpRequest.

С другой стороны, при создании списка компонентов важно, чтобы у каждого дочернего элемента был уникальный атрибут key. Я также обновил это в коде, предполагая, что movie.id 

Пример кода Axios:

axios.get(URL)
  .then(response => response.data)
  .then(data => this.setState({ data }));

EDIT: как писал в ответе trixn, componentDidMount является предпочтительным местом для получения данных. Обновленный код.

EDIT 2: добавлен код аксиоса.

5
Phillip

Вы можете использовать axios для отправки http-запросов.

Это выглядит так: 

const response = await axios.get(your_url_here);
const items = response.data.items;

О ключевом слове await: Как использовать ключевое слово await для реагирования на родной язык?

Это аксиос-страница GitHub для документов: https://github.com/axios/axios

Надеюсь, поможет. 

2
WaLinke

Вы можете использовать fixed Data table для отображения данных из json Response. Так как данные огромны, и будет сложно управлять обычной таблицей, это будет лучшей альтернативой.

Документация предоставляется по адресу

https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ObjectDataExample.js

Эта ссылка поможет вам.

1
Erick