如何获取系列api数据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

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

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

使用获取本地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>

Answer 4

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

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

import React from "react";

const Data = ({ results }) => {
  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;