使用React Axios请求Django REST API时控制台输出[object Object]无法处理数据

DevOps 小满

2026-9-27

问题根因与解决方案

1. 控制台输出`[object Object]`的原因

你使用+做字符串拼接时，JavaScript会自动将对象类型的response.data调用toString()方法转换为字符串，普通对象的转换结果固定为[object Object]，和接口返回无关，属于打印方式错误。

2. 现有代码的其他明显错误

接口路径拼写错误：url中写的peoduct是拼写错误，正确应为product，会导致接口请求失败返回异常数据
状态更新函数拼写错误：setPoduct漏写字母r，应为setProduct，会导致状态无法正常更新，后续拿不到存储的数据
缺少错误捕获逻辑：请求失败的场景没有处理，无法定位接口请求本身的问题
异步逻辑写法冗余：同时用了async/await和.then()，属于不必要的写法

3. 映射操作失败的原因

你当前请求的是带id的单条商品接口，接口返回的是单个对象，而map是数组专属的遍历方法，直接对对象调用map会抛出错误。如果你需要遍历列表，改为请求无id的商品列表接口即可。

修正后的代码

useEffect(() => {
  const getProduct = async () => {
    try {
      const response = await Axios({
        method: "GET",
        // 修正路径拼写
        url: `http://127.0.0.1:8000/api/product/${id}`,
        headers: {
          "Content-Type": "application/json"
        }
      })
      // 修正状态更新函数拼写
      setProduct(response?.data);
      // 拆分打印参数，不要拼接对象和字符串，控制台可直接展开查看对象结构
      console.log('ffa', response?.data);
    } catch (err) {
      // 捕获请求错误，方便排查
      console.error('请求失败：', err)
    }
  };
  getProduct();
},[id]);