我試圖僅從選定的特定專案中獲取資料，但不幸的是我不知道如何處理。
這是我嘗試過的：
我的路線是這樣的：
<Router>
<Switch>
<Route exact path="/explore">
<ExploreCard closetItems={closetItems} />
</Route>
<Route path="/explore/:id">
<ExploreDetail
closetItems={closetItems}
setClosetItems={setClosetItems}
/>
</Route>
</Switch>
</Router>
和從 API 獲取：
const [closetItems, setClosetItems] = useState([]);
useEffect(() => {
const getClosets = async () => {
try {
const response = await axios.get(
"https://api.npoint.io/eb35d003cd0c1991c6aa"
);
const closet = response.data;
setClosetItems(closet);
} catch (error) {
console.log(error);
}
};
getClosets();
}, []);
然后我通過這樣的專案進行映射：
{closetItems.map((list) => (
<div key={list.id}>
<h4>
Name: <Link to={`/explore/${list.id}`}>{list.name}</Link>
</h4>
</div>
))}
這里使用上面的代碼會發生什么：
- 我到達了正確的路徑（如果我選擇一個 ID 為 2 的專案，則路徑為
/explore/2） - 路徑
/explore/2顯示所有專案的詳細資料，不僅是id=2
這是它的樣子：
const ExploreDetails = ({ closetItems, setClosetItems }) => {
const { id } = useParams();
return (
{closetItems
// .filter((list) => list.id === id)
.map((list) => (
<div key={list.id}>
<h2>Name: {list.name}</h2>
<h4>Category: {list.email}</h4>
</div>
))}
如何僅獲取所選專案的資料id = 2？
uj5u.com熱心網友回復：
從賈瓦德Masoudian的答案添加，如果你想回傳只有符合一定條件下，也可以使用元素Array#find，然后使用它像這樣：
//...
const params = useParams();
const list = closetItems.find(({ id }) => id === parseInt(params.id));
//...
return (
<>
<h2>Name: {list.name}</h2>
<h4>Category: {list.email}</h4>
</>
);
這樣您就不會取回陣列，而是取回您可以直接使用的物件本身。
uj5u.com熱心網友回復：
URL 的所有引數都是字串型別。
您可以使用parseInt()方法轉換為整數型別。
const ExploreDetails = ({ closetItems, setClosetItems }) => {
const { id } = useParams();
return (
{closetItems
.filter((list) => list.id === parseInt(id))
.map((list) => (
<div key={list.id}>
<h2>Name: {list.name}</h2>
<h4>Category: {list.email}</h4>
</div>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/345882.html
標籤：javascript 反应 接口 反应钩子 拿来