Блог

Я никогда не использовал этот стиль вызова Axios, и, к сожалению, это единственный, с которым работает API, и это единственный API, который я могу найти, который содержит правильные данные. Когда я делаю вызов, я получаю неопределенные ответы, и я не уверен, как переформатировать вызов axios, чтобы он работал. Кроме того, мне нужно в какой-то момент передать пользовательские параметры вызову, но я не уверен, как получить к ним доступ в файле ReactJS.

Любая помощь была бы отличной!

ФАЙЛ API

 
const axios = require("axios");

const country = "US";
const currency = "USD";
const locale = "en-US";
const originplace = "SFO-sky";
const destinationplace = "JFK-sky";
const outboundpartialdate = "anytime"; // “yyyy-mm-dd”

axios({
  "method": "GET",
  "url": "https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/"   country   "/"   currency   "/"   locale   "/"   originplace   "/"   destinationplace   "/"   outboundpartialdate,
  // "url": "https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/US/USD/en-US/SFO-sky/JFK-sky/anytime",
  // "url": "https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/US/USD/en-US/any/any/anytime",
  // "url": "https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/US/USD/en-US/" originplace "/JFK-sky/anytime",
  "headers": {
    "content-type": "application/octet-stream",
    "x-rapidapi-host": "skyscanner-skyscanner-flight-search-v1.p.rapidapi.com",
    "x-rapidapi-key": "",
    "useQueryString": true
  }, "params": {
    "inboundpartialdate": "2019-12-01",
  }
})
  .then((response) => {
    console.log(response.data); //Logs the correct output
  })
  .catch((error) => {
    console.log(error)
  })

 

ФАЙЛ REACTJS

 import React, { useState, useEffect } from "react";
import { Component } from "react";
import flightAPI from "../utils/flightAPI";
import { Col, Row, Container } from "../components/Grid";
import SiteNav from "../components/SiteNav";
import FlightsCard from "../components/FlightsCard";
import Footer from "../components/Footer";
import "./style.css"

function Home() {

    // Setting our component's initial state
    const [flights, setFlights] = useState([])

    // Load all states and store them with setStates
    useEffect(() => {
        loadFlights()
    }, [])

    // Loads all states and sets them to states
    function loadFlights() {


        setFlights(flightAPI),
            console.log("This is the response: "), // Logs {}
            console.log(flightAPI),
            console.log("This is the current state: "), // Logs []
            console.log(flights)

    };


    return (
        <div>
            <Container>
                <Row>
                    <Col size="md-12">
                        <SiteNav />
                    </Col>
                </Row>
                <Row>
                    <Col size="md-12">
                        <h1 id="hotflights">Hot Flights</h1>
                        <FlightsCard />
                    </Col>
                </Row>
                <Row>
                    {flights amp;amp; flights.map(function (flight, i) {
                        return (

                            <Col size="3">
                                <FlightsCard/>
                            </Col>
                        )
                    })}
                </Row>
                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <Footer />
            </Container >
        </div >
    );
}
export default Home;
 

Я изменил вызов API, чтобы он выглядел как:

 export default {
  getFlightData: function () {
    return (
      fetch("https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsequotes/v1.0/US/USD/en-US/MSP-sky/JFK-sky/anytime?inboundpartialdate=anytime", {
        "method": "GET",
        "headers": {
          "x-rapidapi-host": "skyscanner-skyscanner-flight-search-v1.p.rapidapi.com",
          "x-rapidapi-key": ""
        }
      })
        .then((response) => {
          response.json();
        })
    )
  }
}
 

Это все еще дает undefined как возврат.