Código del componente Row.js donde estoy llamando a la clave api Row.js
import React, { useState, useEffect } from 'react'; import axios from 'axios'; export default function Row({title, fetchUrl}) { const [movies, setMovies] = useState([]) // A snippet of code that runs based on a specific condition useEffect(() => { //if [], run once when the row load async function fetchData() { const request = await axios.get(fetchUrl); console.log(request); } fetchData(); }, []); return ( <div> <h2>{title}</h2> </div> ) }axios.js
import axios from "axios"; // base url to make requests to the movie database const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", }); export default instance;El error en el registro de la consola está por debajo de uno, obtuve la clave API de TMBD Api y funcionaba bien con el cartero, pero aquí en reaccionar no funciona correctamente.
Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}message: "Request failed with status code 404"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta char…not GET /trending/all/week</pre>\n</body>\n</html>\n', status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …}[[Prototype]]: Error fetchData @ Row.js:13 await in fetchData (async) (anonymous) @ Row.js:14 commitHookEffectListMount @ react-dom.development.js:23150 invokePassiveEffectMountInDEV @ react-dom.development.js:25154 invokeEffectsInDev @ react-dom.development.js:27351 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330 flushPassiveEffectsImpl @ react-dom.development.js:27056 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533creaste una instancia de axios pero no la usaste
import instance from "the path to your axios.js file" //like "./axios"y en el fetchData
async function fetchData() { const request = await instance.get(fetchUrl); console.log(request); }