如何获取系列api数据ReactJS？

Question

我试图获取一系列api数据。根据下面的api数据，每个系列都有自己的数据，例如，一系列“bannerData”有自己的数据id，banner_title...下一个系列“home ecatData”有自己的数据，比如id，category_title...等等
在我的例子中，endpointapi是http://localhost:8000/api/homepage/

如何在reactjs中获取这些数据？

我可能是新手。如果有人能帮我解决我要解决的问题，那就太好了。事先非常感谢你。

{
    "bannerData": [
        {
            "id": 2,
            "banner_title": "CORONA sell",
            "banner_image": "http://localhost:8000/media/hero_man.png",
            "discount_price": 86,
            "product_category": "7"
        }
    ],
    "homecatData": [
        {
            "id": 7,
            "category_title": "new-arrival",
            "category_slug": "new-arrival",
            "category_description": "",
            "category_image": "http://localhost:8000/media/cat2.jpg"
        },
    ],
    "homeproductData": [
        {
            "_id": 9,
            "product_title": "product05",
            "product_price": 21,
            "product_image": "http://localhost:8000/media/product4_JOvGftO.png",
            "product_new": false
        },
        {
            "_id": 7,
            "product_title": "product03",
            "product_price": 21,
            "product_image": "http://localhost:8000/media/product3.png",
            "product_new": false
        },

    ],
}

Answer 1

Axios将帮助您获取api数据
在终端上键入npm I axios以使用axis获取数据

访问https://www.npmjs.com/package/axios安装轴并学习如何使用它

Answer 2

您可以从每个主要json数据（bannerData、homecatData、homeproductData）中提取

export const fetchbannerData = ()  =>{
        return fetch(baseurls+'bannerData')
            .then(response => {
                    if (response.ok) {
                        return response;
                    } else {
                        var error = new Error('Error ' + response.status + ': ' + response.statusText);
                        error.response = response;
                        throw error;
                    }
                },
                error => {
                    var errmess = new Error(error.message);
                    throw errmess;
                })
            .then(response => response.json())
    }

Answer 3

获取中的数据的方法有很多种。最常见的方法之一是使用名为axios的包进行读取。因为您使用的是基于类的组件，所以它看起来像这样。

根据您的要求，这里有一个工作沙箱。

import React, { Component } from "react";
import axios from 'axios'
import Data from "./contact.js";

    export default class App extends Component {
      state = {
        results: [],
        isLoading: false,
      };

      componentDidMount() {
        this.fetchData();
      }

      fetchData = async () => {
        this.setState({ isLoading: true });
        try {
          const response = await axios.get("http://localhost:8000/api/homepage/");
          this.setState({ results: response, isLoading: false });
        } catch (error) {
          console.log(error);
        }
      };

      render() {
        if (this.state.isLoading) {
          return "Loading...";
        }
        return <Data results={this.state.results} />;
      }
    }

您正在尝试映射您的联系人中的对象。js文件。您可以随时对其进行分解，或者必须使用点运算符显式访问所需的数组，并且在react中，使用时必须使用className，而不仅仅是class。

从"反应"导入反应；

const Data = ({ results }) => {
  if (!results) {
    return "";
  }
  const { bannerData, homecatData } = results;
  return (
    <div>
      <center>
        <h1>Banner Data</h1>
      </center>
      {bannerData.map((bannerData) => (
        <div className="card">
          <div className="card-body">
            <h5 className="card-title">{bannerData.banner_title}</h5>
            <h6 className="card-subtitle mb-2 text-muted">
              {bannerData.banner_image}
            </h6>
            <p className="card-text"></p>
          </div>
        </div>
      ))}

      <center>
        <h1>Home Category Data</h1>
      </center>
      {homecatData.map((homecatData) => (
        <div className="card">
          <div className="card-body">
            <h5 className="card-title">{homecatData.category_title}</h5>
            <h6 className="card-subtitle mb-2 text-muted">
              {homecatData.category_image}
            </h6>
            <p className="card-text"></p>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Data;