javascript - 如何将组件的结果呈现为卡片

Question

Screen shot努力从 https://blockchain.info/blocks?format=json 返回 json 数据将时间、哈希值和高度数据显示为卡片

我尝试显示从 http://jsonplaceholder.typicode.com/users 获取的 Json 数据它起作用了，所有内容都显示为卡片

来自 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 数据作为卡片返回，但唯一返回的是区 block 链元素

Answer 1

在假设数据可迭代之前，您需要检查数据是什么。如果您转到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 })

然后，您需要更新列表组件的主体以反射(reflect)您要迭代的数据的形状:

<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>