React项目调用Strapi API时遇Uncaught TypeError问题求助

首次开发项目时，当不在Category.jsx中映射数据时项目运行正常，但尝试从Strapi API获取数据并编写映射代码后，控制台出现Uncaught TypeError: Cannot read properties of undefined (reading 'data')错误。

相关代码 #

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;

Category.jsx #

import "./Category.scss";

import cat1 from '../../../assets/category/cat1.jpg'

const Category = ({categories}) => {
    return (
        <div className="shop-by-category">
            <div className="categories">
                {categories.data.map((item) => {
                    <div key={item.id} className="category">
                        <img src={process.env.REACT_APP_STORE_URL + item.attributes.img.data.attributes.url} 
                        alt="" />
                    </div> 
                })}        
            </div>
        </div>
    );
};

export default Category;

context.jsx #

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;

api.js #

import axios from "axios";

const params = {
    headers: {
        Authorization: "bearer" + process.env.REACT_APP_STRIPE_APP_KEY
    }
}

export const fetchDataFromApi = async (url) => {
    try {
        const { data } = await axios.get(process.env.REACT_APP_STORE_URL + url, params)
        return data
    } catch (error) {
        console.log(error)
        return error
    }
}

原因分析 #

错误根源是组件渲染时API数据还未加载完成，categories初始状态为undefined，直接访问categories.data触发报错。context中useState()未设置初始值，初始状态是undefined，而组件会先完成一次渲染，此时还未拿到API返回的数据。

简单解决方案 #

1. 给状态设置初始值 #

修改context.jsx，给categories和products设置包含空数组data的初始对象，确保初始时categories.data是合法的空数组：

const [categories, setCategories] = useState({ data: [] })
const [products, setProducts] = useState({ data: [] })

2. 修复映射的返回问题 #

原代码中map函数内的元素没有返回，需把大括号{}改成小括号()，或者显式添加return：

// 写法一：用小括号自动返回元素
{categories.data?.map((item) => (
    <div key={item.id} className="category">
        <img 
            src={process.env.REACT_APP_STORE_URL + item.attributes.img?.data?.attributes?.url || cat1} 
            alt={item.attributes.name || "category"} 
        />
    </div> 
))}

// 写法二：显式return
{categories.data?.map((item) => {
    return (
        <div key={item.id} className="category">
            <img 
                src={process.env.REACT_APP_STORE_URL + item.attributes.img?.data?.attributes?.url || cat1} 
                alt={item.attributes.name || "category"} 
            />
        </div> 
    )
})}

3. 增加容错处理（可选） #

使用**可选链操作符?.**确保数据不存在时不会报错，同时给图片设置默认值，防止地址获取失败：

• item.attributes.img?.data?.attributes?.url：只要链上某一步为undefined，就停止执行，避免报错
• || cat1：图片地址无效时显示本地默认图片
• 给alt设置有意义的文本，符合网页无障碍要求

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