I am trying to make a movie suggestion app.
Now, I am trying to fetch movies data using axios in api/index.js, and use that data in movieName.js.
Even though I am calling it only once, why is it called 5 times??
/api/index.js
import axios from "axios";
export const fetchAPI = async ()=>{
let url = "https://ghibliapi.herokuapp.com/films";
const data = await axios.get(url);
console.log("the data we just got is like this", data)
//why is this one repeated 5 times??
return (
<h1>
will put data in here.
</h1>
)
}
movieName.js
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {fetchAPI} from '../../api/index'
function MovieName(){
let fetchedData = fetchAPI()
console.log({fetchedData})
return (
<div>
<p>I will implement </p>
<Link to= '/MovieName'>
<h1>Search By MovieName</h1>
</Link>
<p>here</p>
</div>
)
}
export default MovieName
in the console,
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
Why is this? And is it worth paying attention to this? How do I fix this?