Как отобразить результаты компонента в виде карточек - PullRequest
Новая
       4

Как отобразить результаты компонента в виде карточек

1 голос
/ 23 октября 2019

Снимок экрана изо всех сил пытается вернуть данные json из https://blockchain.info/blocks?format=json, чтобы показать данные о времени, хэше и высоте в виде карточек

Я пытался показать данные Json, полученные изhttp://jsonplaceholder.typicode.com/users и это сработало, и все отображалось в виде карточек

из list.js 

import React from 'react'

    const List = ({ list }) => {
      return (
        <div>
          <center><h1>Blockchain List</h1></center>
          {list.map((list) => (
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">{list.blocks.hash}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{list.blocks.time}</h6>
                <p class="card-text">{list.blocks.height}</p>
              </div>
            </div>
          ))}
        </div>
      )
    };

    export default List;

from App.js

import React, { Component } from 'react';
import List from './components/list';


class App extends Component {
  state = {
    list: []
  }

  componentDidMount() {
    fetch('https://blockchain.info/blocks?format=json')
    .then(res => res.json())
    .then((data) => {
      this.setState({ list: data})
    })
    .catch(console.log)
  }

  render() {
    return(
      <List list={this.state.list} />
    )
  }
}

export default App;

Я ожидал, что данные Json будут возвращены в виде карточек, но единственное, что было возвращено, былоБлокчейн элемент

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

Во время отображения просто измените имя List.map (list) на List.map (elem) 

import React from 'react'

        const List = ({ list }) => {
          return (
            <div>
              <center><h1>Blockchain List</h1></center>
              {list.map((elem) => (
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">{elem.hash}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">{elem.time}</h6>
                    <p class="card-text">{elem.height}</p>
                  </div>
                </div>
              ))}
            </div>
          )
        };

    export default List;

Я только что добавил & cors = true к вызову API fetch 

class App extends Component {
  state = {
    list: []
  }

  componentDidMount() {
    fetch('https://blockchain.info/blocks?format=json&cors=true')
    .then(res => res.json())
    .then((data) => {
      this.setState({ list: data.blocks})
    })
    .catch(console.log)
  }

  render() {
    return(
      <List list={this.state.list} />
    )
  }
}

Это работает, проверьте это https://codesandbox.io/s/still-fog-wyj5f?fontsize=14

0 голосов
/ 23 октября 2019

Вам необходимо проверить, что это за данные, прежде чем предположить, что они итеративны. Если вы перейдете на https://blockchain.info/blocks?format=json и откроете инструменты разработчика и вставите в консоль следующее: 

fetch('https://blockchain.info/blocks?format=json')
    .then(res => res.json())
    .then((data) => {
      console.warn(data)
    })
    .catch(console.log)

На самом деле будет показано, что data имеет ключ blocks, который указывает на списокэлементов, которые вы хотите перебрать. Таким образом, вы должны установить состояние на: this.setState({ list: data.blocks })

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

<div class="card">
              <div class="card-body">
                <h5 class="card-title">{list.blocks.hash}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{list.blocks.time}</h6>
                <p class="card-text">{list.blocks.height}</p>
              </div>
            </div>

до 

<div class="card">
              <div class="card-body">
                <h5 class="card-title">{list.hash}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{list.time}</h6>
                <p class="card-text">{list.height}</p>
              </div>
            </div>
...