我正在尝试在我的页面上显示我从APi调用获得的结果 结果是一个对象 我尝试将结果保存在状态变量中，然后使用它，但是当我尝试访问它时出现错误。 波纹管是我的代码
const Home = () => {
const [products, setProducts] = useState({});
useEffect(() => {
storeProducts();
}, [])
const storeProducts = async () => {
const url = "https://api.oneb.cn/1688/item_search/?q=男鞋&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=40";
try{
const response = await fetch (url);
const data = await response.json();
setProducts(data);
}catch(err){
console.log(err);
}
}
console.log(Array(products.items));
}
如果我控制台.log(产品)我得到下面的数据
"items": {
"page": "1",
"real_total_results": 1900,
"total_results": 1900,
"page_size": 19,
"pagecount": 100,
"item": [
{
"title": "2022 Forrest Gump Men's Shoes Sneakers",
"pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN0169mRVd28cyyzgQQot_!!2735587954-0-cib.jpg",
"promotion_price": "23.50",
"price": "23.50",
"sales": 9767,
"turnover": "3万+",
"num_iid": "643775889196",
"seller_nick": "望都县普乐达商贸有限公司",
"tag_percent": "19%",
"area": "望都县",
"detail_url": "https://detail.1688.com/offer/643775889196.html"
},
{
"title": "2022 Martin Men's Shoes Pigskin Autumn",
"pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01iURzli2Ka1udcUHnM_!!2212881679572-0-cib.jpg",
"promotion_price": "83.00",
"price": "83.00",
"sales": 223,
"turnover": "1万+",
"num_iid": "680418137900",
"seller_nick": "惠安榀尚上品鞋厂",
"tag_percent": "20%",
"area": "惠安县",
"detail_url": "https://detail.1688.com/offer/680418137900.html"
},
],
}
现在我尝试显示产品，我喜欢下面
This is not working using state variable
<div className="row hotDealProduct">
{Array(products.items).map((values) => {
return (
<div className="col-lg-3 col-md-4 col-sm-6 col-6">
<span>Total: {values.total_results}</span>
{values.item.map((val) => (
<>
<div className="productImage">
<img
style={{ height: "100%", width: "100%" }}
src={val.pic_url}
alt=""
/>
</div>
<Link
to="/"
style={{ textDecoration: "none", color: "#1a1a1a" }}
>
<div className="cardDetail">
<div>
<p>{val.title}</p>
</div>
<div>
<h6>¥ {val.price}</h6>
</div>
<div>
<h6>{val.sales}</h6>
</div>
</div>
</Link>
</>
))}
</div>
);
})}
</div>
但是TypeError: Cannot read properties of undefined (reading 'total_results')Andi 尝试删除此行时我收到错误，并且还收到错误Cannot read properties of undefined (reading 'item')
如果我没有使用状态变量并执行以下操作，那么它可以工作，但由于我使用的是API，我需要能够动态处理数据
const prod = "items": {
"page": "1",
"real_total_results": 1900,
"total_results": 1900,
"page_size": 19,
"pagecount": 100,
"item": [
{
"title": "2022 Forrest Gump Men's Shoes Sneakers",
"pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN0169mRVd28cyyzgQQot_!!2735587954-0-cib.jpg",
"promotion_price": "23.50",
"price": "23.50",
"sales": 9767,
"turnover": "3万+",
"num_iid": "643775889196",
"seller_nick": "望都县普乐达商贸有限公司",
"tag_percent": "19%",
"area": "望都县",
"detail_url": "https://detail.1688.com/offer/643775889196.html"
},
{
"title": "2022 Martin Men's Shoes Pigskin Autumn",
"pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01iURzli2Ka1udcUHnM_!!2212881679572-0-cib.jpg",
"promotion_price": "83.00",
"price": "83.00",
"sales": 223,
"turnover": "1万+",
"num_iid": "680418137900",
"seller_nick": "惠安榀尚上品鞋厂",
"tag_percent": "20%",
"area": "惠安县",
"detail_url": "https://detail.1688.com/offer/680418137900.html"
},
],
}
并像这样使用....
This is working using local variable
<div className="row hotDealProduct">
{Array(prod.items).map((values) => {
return (
<div className="col-lg-3 col-md-4 col-sm-6 col-6">
<span>Total: {values.total_results}</span>
{values.item.map((val) => (
<>
<div className="productImage">
<img
style={{ height: "100%", width: "100%" }}
src={val.pic_url}
alt=""
/>
</div>
<Link
to="/"
style={{ textDecoration: "none", color: "#1a1a1a" }}
>
<div className="cardDetail">
<div>
<p>{val.title}</p>
</div>
<div>
<h6>¥ {val.price}</h6>
</div>
<div>
<h6>{val.sales}</h6>
</div>
</div>
</Link>
</>
))}
</div>
);
})}
</div>
所以状态变量工作但局部变量工作我在这里做错了什么
它返回未定义，因为 map() 方法仅适用于数组，而您正在尝试在对象上使用。
您可以像这样直接使用您的状态：
products?.items?.item?.map();
无需使用。
Array(products.item)
来自API 的 obj 是
"items": {
"page": "1",
"real_total_results": 1900,
"total_results": 1900,
"page_size": 19,
"pagecount": 100,
"item": [
{
"title": "2022 Forrest Gump Men's Shoes Sneakers",
"pic_ur
这将是
products?.items?.item?.map((values) =>
希望有帮助，
毛罗