Strapi API数据获取异常：仅返回产品数量，需获取完整信息

问题描述 #

React项目调用Strapi API获取产品数据时，仅能拿到产品数量，无法获取标题、价格等完整属性信息，需修复代码以获取上传至Strapi的完整产品数据。

相关代码文件 #

Home.jsx

import { useEffect, useContext } from "react";

import "./Home.scss";

import Banner from './Banner/Banner'
import Category from "./Category/Category";
import Products from "../Products/Products";
import { fetchDataFromApi } from "../../utils/api";
import { Context } from "../../utils/context";

const Home = () => {
    const { categories, setCategories, products, setProducts } = useContext(Context);
    useEffect(() => {
        getProducts();
        getCategories();
    }, []);

    const getProducts = () => {
        fetchDataFromApi("/api/products?populate=*").then(res => {
            console.log(res)
            setProducts(res)
        });
    }

    const getCategories = () => {
        fetchDataFromApi("/api/categories?populate=*").then(res => {
            console.log(res)
            setCategories(res)
        });
    }

    return (
        <div>
            <Banner />
            <div className="main-content">
                <div className="layout">
                    <Category categories={categories} />
                    <Products products={products} headingText="Popular Products" />
                </div>
            </div>
        </div>
    );
};

export default Home;

Products.jsx

import "./Products.scss";

import Product from '../Products/Product/Product'

const Products = ({ products, innerPage, headingText }) => {
    return (
        <div className="products-container">
            {!innerPage && <div className="sec-heading">{headingText}</div>}
            <div className="product">
            {
            products && products.data ? 
            products.data.map((item) => { 
              return (
                <div key={item.id} id={item.id} className="category">
                  {item.id}
                  <img src={process.env.REACT_APP_STORE_URL + item.attributes} alt="" />
                </div>
              )
            }) : (
              <div>No products</div>
            )
          }
            </div>
        </div>
    );
};

export default Products;

Product.jsx

import "./Product.scss";
import prod from '../../../assets/products/sneakers-prod-1.png'
const Product = ({id,data}) => {
    return <div className="product-card">
        <div className="thumbnail">
            <img src={prod} alt="" />
        </div>
        <div className="prod-details">
            <span className="name">Dress shoe Taobao Leather Footwear</span>
            <span className="price">&#8377;499</span>
        </div>
    </div>;
};

export default Product;

Context.js

import { createContext, useState } from "react";

export const Context = createContext();

const AppContext = ({ children }) => {
    const [categories, setCategories] = useState()
    const [products, setProducts] = useState()
    return (
        <Context.Provider
            value={{
                categories,
                setCategories,
                products,
                setProducts
            }}>
            {children}
        </Context.Provider>
    );
}

export default AppContext;

解决方案 #

1. 修正Products组件的数据传递与渲染逻辑 #

当前组件未正确调用Product组件，且图片路径拼接错误，修改Products.jsx：

import "./Products.scss";
import Product from './Product/Product' // 修正导入路径

const Products = ({ products, innerPage, headingText }) => {
    return (
        <div className="products-container">
            {!innerPage && <div className="sec-heading">{headingText}</div>}
            <div className="product">
                {products && products.data ? 
                    products.data.map((item) => { 
                        // 从Strapi返回的attributes中提取产品字段
                        const { title, price, image } = item.attributes;
                        // 处理Strapi媒体字段路径（根据实际字段名调整）
                        const imgUrl = image?.data?.attributes?.url;
                        return (
                            <Product 
                                key={item.id} 
                                id={item.id} 
                                data={{
                                    title,
                                    price,
                                    image: `${process.env.REACT_APP_STORE_URL}${imgUrl}`
                                }} 
                            />
                        )
                    }) : (
                        <div>No products</div>
                    )
                }
            </div>
        </div>
    );
};

export default Products;

2. 修正Product组件的动态数据渲染 #

替换硬编码内容，改为接收传递的动态数据：

import "./Product.scss";

const Product = ({ id, data }) => {
    return <div className="product-card">
        <div className="thumbnail">
            <img src={data.image} alt={data.title || "产品图片"} />
        </div>
        <div className="prod-details">
            <span className="name">{data.title}</span>
            <span className="price">&#8377;{data.price}</span>
        </div>
    </div>;
};

export default Product;

3. 初始化Context状态默认值 #

避免首次渲染时因状态未定义报错，修改Context.js：

import { createContext, useState } from "react";

export const Context = createContext();

const AppContext = ({ children }) => {
    // 初始化空结构，防止渲染时products.data不存在
    const [categories, setCategories] = useState([])
    const [products, setProducts] = useState({ data: [] })
    return (
        <Context.Provider
            value={{
                categories,
                setCategories,
                products,
                setProducts
            }}>
            {children}
        </Context.Provider>
    );
}

export default AppContext;

4. 验证Strapi API返回结构 #

查看浏览器控制台getProducts中的console.log(res)输出，确认：

• res.data为产品数组，每个元素的attributes包含标题、价格、图片等字段
• 媒体字段（如图片）的返回结构是否为attributes.image.data.attributes.url，需根据Strapi后台配置调整路径

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