故障排除错误：无法读取未定义的属性（读取“数据”） - 如何在堆栈实现中处理未定义的数据？

Question

在映射从 API 获取响应表单时出现错误“无法读取未定义的属性（读取“数据”）”。

尝试使用'?'来解决检查和避免null的问题

例如：-

<div className="products-container">
            {!innerPage && <div className="heading">
                {title}
            </div>}
            <div className="products">
                {products?.data?.map((item) => (
                    <Product key={item.id} id={item.id} data={item.attributes} />
                ))}

            </div>
        </div>

解决了此特定“产品”组件的问题，但在传递其他“产品”组件的“数据”属性时，再次出现相同的“无法读取未定义的属性（读取“数据”）”

获取过程：-

api.js:-

import axios from 'axios';

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

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

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>
        </>
    )
}

home.js：-

import { fetchData } from "../../utils/api";
import { Context } from "../../utils/Context";
const Home = () => {

    const { categories, setCategories, products, setProducts, } = useContext(Context);

    useEffect(() => {
        getProducts();
        getCategories();
    }, [])

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

    return (
        <div>
            <Banner />
            <div className="main">
                <div className="layout">
                    <Category categories={categories} />
                    <Products products={products} title="Popular Products" />
                </div>
            </div>
        </div>

    );
};

产品.js：-

const Products = ({ innerPage, title, products }) => {
    return (
        <div className="products-container">
            {!innerPage && <div className="heading">
                {title}
            </div>}
            <div className="products">
                {products?.data?.map((item) => (
                    <Product key={item.id} id={item.id} data={item.attributes} />
                ))}

            </div>
        </div>
    );
};

产品.js：-

const Product = (id, data) => {
    
    return (
        <div className="product-card">
            <div className="thumbnail">
                <img src={process.env.REACT_APP_URL + data.img.data[0].attributes.url} alt="product" />
            </div>
            <div className="details">
                <span className="name">{data.title}</span>
                <span className="price">&#8377;{data.price}</span>
            </div>
        </div>
    );
};

Answer 1

您没有在

Product.js

组件中正确接收道具。它们应该被解构并且不能像函数参数一样被访问。

选项1：

const Product = ({id, data}) => {
    
    return (
        <div className="product-card">
            ....
        </div>
    );
};

选项2：

const Product = (props) => {
    const {id, data} = props;
    // or use props.id and props.data
    return (
        <div className="product-card">
            ....
        </div>
    );
};