在映射从 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">₹{data.price}</span>
</div>
</div>
);
};
您没有在
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>
);
};