Estoy tratando de hacer una aplicación de sugerencias de películas.

Ahora, estoy tratando de obtener datos de películas usando axios en api/index.js, y uso esos datos en movieName.js.

Aunque lo estoy llamando solo una vez, ¿por qué se llama 5 veces?

/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

en la consola,

 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: {…}, …}

¿Por qué es esto? ¿Y vale la pena prestar atención a esto? ¿Cómo puedo solucionar esto?