如何打印Axios请求结果数据？如何在div中渲染商品title？

1. 打印Axios返回的数据 #

你可以在Axios的响应回调中直接打印原始数据，或者监听state变化打印已存入数组的数据：

import React, { useEffect, useState } from "react";
import axios from "axios";

const ProductsAPI = () => {
  const [item, setItem] = useState([]);

  useEffect(() => {
    axios
      .get("https://fakestoreapi.com/products")
      .then((res) => {
        // 打印Axios返回的原始数据
        console.log("Axios返回的原始数据:", res.data);
        setItem(res.data);
      })
      .catch((err) => console.error("请求失败:", err)); // 捕获请求错误
  }, []);

  // 监听商品数组变化，打印存入state的数据
  useEffect(() => {
    if (item.length > 0) {
      console.log("State中的商品数组:", item);
      // 解构单个商品示例：取出第一个商品
      const [firstProduct] = item;
      console.log("第一个商品详情:", firstProduct);
    }
  }, [item]);

  return <div></div>;
};

export default ProductsAPI;

2. 在div中渲染每个商品的title #

使用数组的map方法遍历商品数组，为每个商品渲染包含title的div，注意添加唯一key属性（推荐用商品的id）：

import React, { useEffect, useState } from "react";
import axios from "axios";

const ProductsAPI = () => {
  const [item, setItem] = useState([]);

  useEffect(() => {
    axios
      .get("https://fakestoreapi.com/products")
      .then((res) => setItem(res.data))
      .catch((err) => console.error("请求失败:", err));
  }, []);

  return (
    <div className="products-container">
      {/* 遍历商品数组，渲染每个商品的title */}
      {item.map((product) => (
        <div key={product.id} className="product-item">
          {product.title}
        </div>
      ))}
    </div>
  );
};

export default ProductsAPI;

关键说明 #

• map方法会遍历数组中的每个商品对象，直接访问product.title即可获取并渲染标题
• key属性是React列表渲染的必填项，用商品唯一的id可以避免渲染异常
• 初始状态item为空数组，map在空数组上调用不会报错；如果需要加载状态，可添加条件渲染（如{item.length === 0 && <div>加载中...</div>}）

内容的提问来源于stack exchange，提问作者UnkownSomeone