如何获取系列 api-data ReactJS？

Question

我正在尝试获取一系列 api 数据。根据下面的 api-data，每个系列都有自己的数据，例如，一个系列“bannerData”有他们的数据 id，banner_title...，下一个系列“homecatData”有他们的数据，比如 id，category_title...等等最后一个系列。
就我而言，端点 api 是“http://localhost:8000/api/homepage/”

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

我可能是 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

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

这是一个有效的sandbox 根据您的要求。

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

您正在尝试在您的contact.js 文件中映射object。您可以随时解构它们，或者您必须使用点运算符显式访问您想要的数组，并且在 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;

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 将帮助您获取 api 数据。
在终端上输入 npm I axios 以使用轴获取数据

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

Answer 4

使用获取本机 javascript。您可以使用useEffect、useState 或async-await 进行自定义。

//const React = require("react")
//const ReactDOM = require("react-dom")

const baseURL = "https://api.whatdoestrumpthink.com/api/v1/quotes/";
class App extends React.Component {
  state = {
    quotes: [],
    loading: false,
  };

  componentDidMount() {
    this.getQuotes();
  }
  getQuotes() {
    this.setState({ loading: true });
    try {
      fetch(baseURL)
        .then(response => response.json())
        .then((response) => {
          this.setState({
            quotes: response.messages.personalized,
            loading: false,
          });
        });
    } catch (error) {
      console.log(error);
      this.setState({ loading: false });
    }
  }

  render() {
    const { quotes, loading } = this.state;
    if (loading) {
      return "Loading Quotes...";
    }
    return <Quotes quotes={quotes} />;
  }
}
function Quotes({ quotes = [] }) {
  return quotes.map((quote, index) => (<div key={index}>{quote}</div>));
}
ReactDOM.render(<App />, document.getElementById("root-app"));

<div id="root-app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>