Javascript 如何将组件的结果渲染为卡片

努力从返回json数据以将时间、哈希和高度数据显示为卡片

我尝试过显示从中获取的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;

从“React”导入React
常量列表=（{List}）=>{
返回(
区块链列表
{list.map（（list）=>(
{list.blocks.hash}
{list.blocks.time}
{list.blocks.height}
))}
)
};
导出默认列表；
来自App.js
从“React”导入React，{Component}；
从“./components/List”导入列表；
类应用程序扩展组件{
状态={
名单：[]
}
componentDidMount（）{
取（'https://blockchain.info/blocks?format=json')
.then（res=>res.json（））
。然后（（数据）=>{
this.setState（{list:data}）
})
.catch（console.log）
}
render（）{
返回(
)
}
}
导出默认应用程序；

---

我希望Json数据以卡片的形式返回，但返回的唯一内容是区块链元素

您需要检查哪些数据，然后再假设它是可读取的。如果转到并打开开发工具并将以下内容粘贴到控制台中：

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

它将实际显示

数据

有一个

块

键，该键指向要迭代的元素列表。所以您应该将状态设置为：

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>

{list.blocks.hash}
{list.blocks.time}
{list.blocks.height}

到

{list.hash}
{list.time}
{list.height}

在显示时，只需将List.map（List）的名称更改为List.map（elem）

从“React”导入React
常量列表=（{List}）=>{
返回(
区块链列表
{list.map（（elem）=>(
{elem.hash}
{elem.time}
{elem.height}
))}
)
};
导出默认列表；

我刚刚在fetchapi调用中添加了&cors=true

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} />
    )
  }
}  

类应用程序扩展组件{
状态={
名单：[]
}
componentDidMount（）{
取（'https://blockchain.info/blocks?format=json&cors=true')
.then（res=>res.json（））
。然后（（数据）=>{
this.setState（{list:data.blocks}）
})
.catch（console.log）
}
render（）{
返回(
)
}
}  

---

它正在工作，请检查此

上传屏幕截图，了解您的正确操作now@Kinjal完成后，链接位于开始处。setState（{list:data.blocks}）尝试set@AhmedRebai刚刚试过，你的问题仍然在API调用中，API服务器没有正确返回结果Hey Tom，谢谢，我只是试着这么做，但还是没有改变。我还重新启动了服务器，以确保但仍然没有任何问题。您在控制台中的提取请求是否有任何错误？我已将建议的更改应用到您可以在此处查看的代码沙盒中：-提取请求总是由于CORS问题而失败，因此我粘贴了来自成功请求的网络响应，它工作正常，因此可能会影响您的提取请求未解决，然后错误被捕获，它从未调用set state。我调用了，但它是这么说的=感谢您的反馈！声誉低于15的人所投的票将被记录，但不会改变公开显示的帖子分数。

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;

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} />
    )
  }
}