J'essaie de récupérer une série de données api. selon les données api ci-dessous, chaque série a ses propres données, par exemple une série "bannerData" a son id de données, banner_title ... et la série suivante "homecatData" a ses données comme id, category_title ... et ainsi de suite jusqu'à dernière série.
dans mon cas, l'api du point de terminaison est "http: // localhost: 8000 / api / homepage /"

comment récupérer ces données dans reactjs?

Je suis probablement nouveau pour reactjs. ce serait génial si quelqu'un pouvait m'aider ce que j'essaie de résoudre. Merci d'avance.

{
    "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
        },

    ],
}

0
alnnn000 18 avril 2020 à 06:11

4 réponses

Meilleure réponse

Il existe de nombreuses façons de récupérer des données dans react. L'un des moyens les plus courants consiste à récupérer à l'aide d'un package appelé axios. Puisque vous utilisez un composant basé sur une classe, il ressemblera à ceci.

Voici un sandbox fonctionnel. selon votre demande.

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

Vous essayez de mapper un object dans votre fichier contact.js. Vous pouvez toujours les déstructurer ou vous devez accéder explicitement au tableau que vous voulez en utilisant l'opérateur point et également dans react vous devez utiliser className au lieu de simplement class lorsque vous l'utilisez.

Importer React à partir de "react";

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;
1
Ajin Kabeer 18 avril 2020 à 07:23

Vous pouvez extraire de chaque donnée json principale (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())
    }
0
Jahongir Sabirov 18 avril 2020 à 03:25

Axios vous aiderait à récupérer les données de l'API.
tapez npm I axios sur le terminal pour utiliser l'axe pour récupérer les données

Visitez https://www.npmjs.com/package/axios pour installer l'axe et apprendre comment pour l'utiliser

0
Samuel 18 avril 2020 à 03:19

Utilisation de la récupération de javascript natif. Vous pouvez personnaliser en utilisant useEffect, useState ou 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>
0
xdeepakv 18 avril 2020 à 04:30