我正在使用 React 和 Typescript 構建一個 SWAPI 應用程式，我的目標是在我單擊鏈接時能夠獲取有關特定人員的資訊。我當前的問題是，當我嘗試從 api 獲取資料時，使用下面顯示的代碼片段，我看到不是傳遞 id，而是發送 [object Object]
const CharacterDetails = (id): JSX.Element => {
const [character, setCharacter] = useState<any | null>([]);
const handleCharacterRequest = async (id) => {
try {
const results = await getCharacter(id);
setCharacter(results);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
handleCharacterRequest(id)
}, [])
但是，當我在要發送的 id 中硬編碼時，如下面的代碼所示，請求作業正常
const CharacterDetails = (id): JSX.Element => {
const [character, setCharacter] = useState<any | null>([]);
const handleCharacterRequest = async (id) => {
try {
const results = await getCharacter(id);
setCharacter(results);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
handleCharacterRequest(1)
}, [])
當我點擊表格中的條目時，組件應該能夠從主頁接收 ID，使用 react-router-dom 導航方法：
const clickHandler = (event: MouseEvent<HTMLElement>) => {
const { id } = event.target as HTMLElement;
navigate(`/character/${id}`);
};
并單擊此表條目：
<TableCell id={character.id} onClick={(event: any) => clickHandler(event)}>
Id: {character.id}
</TableCell>
我錯過了什么？我是否設定了錯誤的引數？
編輯：這是 React Router 傳遞組件 id 的方式，也許這里缺少一些東西？
<Route path='/character/:id' element={<CharacterDetails />}/>
uj5u.com熱心網友回復：
找到了解決方案。在我的代碼中，我需要使用useParams()react-router-dom 中的方法。
所以解決方案如下所示：
const CharacterDetails = (): JSX.Element => {
const [character, setCharacter] = useState<any | null>([]);
const { id } = useParams();
const handleCharacterRequest = async (id) => {
try {
const results = await getCharacter(id);
setCharacter(results);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
console.log(id)
handleCharacterRequest(id)
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524264.html
標籤：反应打字稿休息