解决React项目中Axios实例配置与使用不当导致的API请求错误

// axios.js
import axios from "axios";

// 基础URL，用于向电影数据库发起请求
const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
});

export default instance;

// Row.js (原始错误代码片段)
import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 这里导入的是全局的axios

export default function Row({title, fetchUrl})  
{  
  const [movies, setMovies] = useState([])

  useEffect(() =>    {
      async function fetchData() {
            const request = await axios.get(fetchUrl); // 错误：使用了全局的axios
            console.log(request);
      }
      fetchData();
  }, []);

  return (
    <div>
      <h2>{title}</h2>
    </div>
  )
}

// Row.js (修改后)
import React, { useState, useEffect } from 'react';
// 导入自定义的Axios实例，而不是全局的axios
import instance from "./axios"; // 假设axios.js在同级目录下
// 如果axios.js在其他路径，请调整为实际路径，例如 '../utils/axios'

// Row.js (修改后)
import React, { useState, useEffect } from 'react';
import instance from "./axios"; // 导入自定义实例

export default function Row({title, fetchUrl})  
{  
  const [movies, setMovies] = useState([])

  useEffect(() =>    {
      async function fetchData() {
            // 使用自定义的instance发起请求
            const request = await instance.get(fetchUrl); 
            console.log(request.data); // 通常我们关心的是响应数据
      }
      fetchData();
  }, []);

  return (
    <div>
      <h2>{title}</h2>
    </div>
  )
}

// axios.js
import axios from "axios";

// 配置一个带有基础URL的Axios实例
const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
    // 可以在这里添加其他全局配置，如超时时间、请求头等
    // timeout: 1000,
    // headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

// Row.js
import React, { useState, useEffect } from 'react';
import instance from "./axios"; // 从相对路径导入自定义的Axios实例

export default function Row({title, fetchUrl})  
{  
  const [movies, setMovies] = useState([]); // 初始化为数组以存储电影列表

  // 使用useEffect在组件加载时执行一次数据获取
  useEffect(() =>    {
    async function fetchData() {
      try {
        // 使用导入的instance发起GET请求
        const response = await instance.get(fetchUrl);
        setMovies(response.data.results); // 假设API响应数据在data.results中
        console.log(response.data); // 打印完整的响应数据
      } catch (error) {
        console.error("数据获取失败:", error);
        // 可以在这里处理错误，例如显示错误消息给用户
      }
    }

    fetchData();
  }, [fetchUrl]); // 依赖项数组，当fetchUrl改变时重新运行effect

  return (
    <div className="row">
      <h2>{title}</h2>
      <div className="row__posters">
        {/* 渲染电影海报或其他内容 */}
        {movies.map(movie => (
          <img 
            key={movie.id} // 确保列表项有唯一的key
            className="row__poster"
            src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} // 示例：TMDB图片URL
            alt={movie.name || movie.title}
          />
        ))}
      </div>
    </div>
  );
}