所以，我得到了這樣的動物卡片視圖：
<AnimalsCard {...elephant}/>
<AnimalsCard {...hippo}/>
<AnimalsCard {...sugar_glider}/>
我的 AnimalCard 代碼如下所示：
export const AnimalsCard = ({ id, animal, img }) => {
const { t } = useTranslation();
return (
<>
<CardContainer id={id} img={img}>
<CardContent>
<CardTitle>{animal}</CardTitle>
<CardButton to={`${id}`}>Dowiedz si? wi?cej</CardButton>
</CardContent>
</CardContainer>
</>
)
};
我的動物物件看起來像這樣：
export const elephant = {
animal: 'S?oń indyjski',
id: 'slon_indyjski',
species: 'mammals',
img: require('../../../images/animals/mammals/elephant.jpg'),
occurance: '',
habitat: '',
diet: '',
reproduction: '',
conservationStatus: '',
funFactOne: ''
}
當我單擊該按鈕時，將打開動物 ID 的新頁面：
<Route path="/:id" component={AnimalsDetails} />
在 AnimalsDetails 頁面上，我想顯示所有動物物件資料。不幸的是，我不知道如何通過它，因為我是初學者，對道具和東西幾乎一無所知。我目前的方法是在 AnimalsDetails 中使用 useParams() 檢索 ID；
export const AnimalsDetails = () => {
const [mammal, setMammal] = useState(null);
let { id } = useParams();
useEffect(() => {
const mammal = mammalsData.filter(thisMammal => thisMammal.id === id);
setMammal(mammal);
// console.log(mammal[0].animal);
}, [id]);
return ( <AnimalsDetailsContainer>
{/* <div>{mammal[0].id}</div> */}
</AnimalsDetailsContainer>
)
};
export default AnimalsDetails;
然后使用 URL 中的 ID，過濾我創建的 mammalsData 陣列，只是為了測驗該方法是否有效（我希望我可以使用以前創建的物件，但我不知道這是否可能）。它看起來像這樣：
export const mammalsData = [
{
[...]
},
{
animal: 'abc',
id: 'fgh',
species: 'idontknow',
img: require('whatimdoing.JPG'),
occurance: '',
habitat: '',
diet: '',
reproduction: '',
conservationStatus: '',
funFactOne: ''
}
];
目前只有當我在動物卡片頁面上并單擊按鈕時它才有效，因此 ID 存在。如果我在頁面的其他地方并且我的 ID 尚未宣告，我會收到一條錯誤訊息，指出我要顯示的資料未定義，這顯然是有道理的。如果 ID 不存在，我嘗試包裝 AnimalsDetails 的回傳以記錄錯誤，但它不起作用。
我知道有一些不錯的方法可以做到這一點（可能使用不同定義的道具或鉤子），但我真的嘗試了很多東西，但我現在完全迷路了。我希望我可以通過單擊按鈕或其他東西將資料傳遞給 AnimalsDetails，但不知道該怎么做。:-(
我將不勝感激任何幫助。我知道這是基本的東西，但這是我的第一個網站。
uj5u.com熱心網友回復：
我明白你的問題。在我看來，您希望關注 useEffect 方法，如下所示。
useEffect(() => {
if(id != undefined)
// console.log('error);
return (
<div>{'error'}</div>
);
const mammal = mammalsData.filter(thisMammal => thisMammal.id === id);
setMammal(mammal);
// console.log(mammal[0].animal);
}, [id]);
uj5u.com熱心網友回復：
如果您使用的是最新的 React 路由器 (v6)，請使用element而不是render（此處）：
<Route path="/:id" element={<AnimalsDetails animal={yourAnimal} />} />
uj5u.com熱心網友回復：
試試這個方法。在父組件中添加這部分
<Route path="/:id" render={()=> <AnimalsDetails item={...animaldata} />} />
在 AnimalDetails 組件中
import React, { useEffect } from 'react';
import {useParams} from 'react-router-dom';
const { animalId } = useParams();
let animal;
useEffect(()=> {
if(animalId && props.item) {
animal = props.item.filter(a => a.id === animalId)
}
}, [animalId]);
uj5u.com熱心網友回復：
當您想使用 url 傳遞資料時，inreact router v6具有該功能。
假設這是您的 Animals 組件，
import { Link } from "react-router-dom";
//let assume this is the data that you need to send
const elephant = {
animal: "S?oń indyjski",
id: "slon_indyjski",
species: "mammals",
img: require("../../../images/animals/mammals/elephant.jpg"),
occurance: "",
habitat: "",
diet: "",
reproduction: "",
conservationStatus: "",
funFactOne: "",
};
const Animals = props => {
//elephant.id is dynamic value. You have to add that value dynamically.
return (
<Link to={`${elephant.id}`} state={{ singleAnimal: elephant }}>
<div>this is single animal</div>
</Link>
);
};
在Link component你必須提到你的并且你不能從屬性dynamic route發送你的資料 。state
在接收端，（假設您的接收端組件是SingleanimalData.
import { useLocation } from "react-router-dom";
const SingleanimalData = props => {
const location = useLocation();
//animal variable now has that recieving data.so console it to view data
const animal = location.state.singleAnimal;
return (
<div>
<div>My animal name:</div>
<div> {animal.animal} </div>
</div>
);
};
在這里你必須使用useLocation鉤子來抓取資料。我希望這對你有意義。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533622.html
標籤：javascript反应