问题描述
我正在通过获取 Fortnite 即将推出的项目来练习进行 api 调用。
我正在尝试访问 json 数组中的 itemId 和项目名称,大致如下所示:
data: Array(67)
0: {itemId: "bcc523f5-bef4-44eb-8855-35a1413b669c",lastUpdate: 1617619592,item: {…}}
1: {itemId: "723a761f-fa59-4cfc-92e7-9309a87c5a9e",lastUpdate: 1617585135,item: {…}
}
然后:
0:
item: {name: "Ruby Shadows",description: "Sometimes you gotta go dark.",type: "outfit",rarity: "epic",series: "shadow",…}
itemId: "bcc523f5-bef4-44eb-8855-35a1413b669c"
lastUpdate: 1617619592
__proto__: Object
我使用 .map 来执行此操作,但在某些情况下,<h3 key={items.itemId}>
中的对象字面量不会返回所需的结果。 (目前返回 undefined)
我整个下午都在为这件事头疼。仍然是新的反应。
我的代码:
import './App.css';
import { Link } from 'react-router-dom';
function Shop() {
useEffect(() => {
fetchItems();
},[]);
const [items,setItems] = useState([]);
let dataArray = [];
const fetchItems = async () => {
const data = await fetch('https://fortnite-api.theapinetwork.com/upcoming/get');
const items = await data.json();
dataArray = items.data;
setItems(dataArray.map( x => {return x}));
console.log(items);
}
return (
<div id="App">
<h1>Upcoming Fortnite Items</h1>
<div>
{items.map(x =>
<Link to={`/shop/${items.itemId}`}>
<h3 key={items.itemId}>
{x.item.name}
</h3>
</Link>)}
</div>
</div>
);
}
export default Shop;
感谢您的帮助,谢谢。
编辑:
这是另一个组件处理另一个页面的组件,其中应该输出项目详细信息:(抱歉)
import './App.css';
import { Link } from 'react-router-dom';
function ItemDetail({ match }) {
/**this puts it into effect */
useEffect(() => {
fetchItem();
console.log(match);
},[]);
const [item,setItem] = useState([]);
const fetchItem = async () => {
const fetchItem = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id={{itemid}}`);
const item = await fetchItem.json();
}
return (
<div id="App">
<h1>Item</h1>
</div>
);
}
export default ItemDetail;```
解决方法
问题就在这里:
return (
<div id="App">
<h1>Upcoming Fortnite Items</h1>
<div>
{items.map(x =>
<Link to={`/shop/${items.itemId}`}> // <------- Here
<h3 key={items.itemId}> //<-------- Here
{x.item.name}
</h3>
</Link>)}
</div>
</div>
);
您需要从每个元素中获取 itemId
,现在您正在尝试从实际数组中获取值,该数组不包含任何字段,因此为您提供 undefined
。
代码应该是这样的:
return (
<div id="App">
<h1>Upcoming Fortnite Items</h1>
<div>
{items.map(x =>
<Link to={`/shop/${x.itemId}`}>
<h3 key={x.itemId}>
{x.item.name}
</h3>
</Link>)}
</div>
</div>
);