Reactjs 直接获取并显示数据

【问题标题】：Reactjs fetch and show data directlyReactjs 直接获取并显示数据
【发布时间】：2019-11-12 18:57:21
【问题描述】：

是否有直接获取和显示数据的示例或示例。

假设我们有JSON 数据，我们想在一些可用数据时显示，所以如果JSON 中有许多对象并且一旦一个数据对象准备好，我们就显示它并等待下一次，并在准备好后加载.我们在一个端点上完成这一切。

问候

【问题讨论】：

标签： reactjs fetch

【解决方案1】：

你的描述在 React 中是相当标准的。

假设你有你的List 组件，并且当组件挂载时，你观察为你的API 生成一个fetch 并呈现数据。您可以执行以下操作。

import React, {Component} from 'react'

export default class List extends Component {
   state = { 
      listData: []
   }

   componentDidMount = () =>{
     fetch('YOUR_URL_HERE')
      .then(response => response.json())
      .then(data => this.setState({ listData: data}));
   }

   render(){
     return(
        <div>
          {this.state.listData.map((listItem, i)=>{
               return <p>{listItem.propertyToRender}</p>
           })}
         </div>
     )
   }
}

【讨论】：