<Route exact path="/product/:id" element={<ProductPage />} prod_id={this.id}/>
在這里，我有一條路線，我的意圖是獲取組件中路徑的 ID，以便我可以觸發該功能并獲取產品的詳細資訊，這顯然prod_id={this.id}不適合我，也應該不適合寫這是意圖只是為了表明我在想什么
一旦我在我的組件中得到這個 id，我就可以觸發這個函式
export const getSingle=(id) => async(dispatch)=>{
try {
dispatch({type:SINGLE_PRODUCT_REQUEST})
const {data} = await axios.get(`/api/v1/products/detail:${id}`)
dispatch({
type:SINGLE_PRODUCT_SUCCESS,
payload:data,
})
} catch (error) {
dispatch({
type:SINGLE_PRODUCT_FAIL,
payload:error.response.data.message,
})
}
}
獲取產品詳細資訊并填寫必填欄位
uj5u.com熱心網友回復：
您不能將道具傳遞給 Route 并在目標組件中訪問它們。這不是 React 中的作業方式。
如果你想從 URL 訪問引數，你可以使用鉤子 - useParams()
export const getSingle= () => async(dispatch)=>{
try {
dispatch({type:SINGLE_PRODUCT_REQUEST})
const params: { id: string } = useParams();
const {data} = await axios.get(`/api/v1/products/detail:${params.id}`)
dispatch({
type:SINGLE_PRODUCT_SUCCESS,
payload:data,
})
} catch (error) {
dispatch({
type:SINGLE_PRODUCT_FAIL,
payload:error.response.data.message,
})
}
}
對于非功能組件，您必須從道具訪問引數
class Example extends Component {
render() {
const { id } = this.props.match.params;
return (
<div>ID : { id }</div>
);
}
}
uj5u.com熱心網友回復：
你可以id從useParams()鉤子上得到。
路線代碼
<Route exact path="/product/:id" element={<ProductPage />} />
在反應組件中，匯入useParams鉤子react-router-dom
并使用
let { id } = useParams();
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/429547.html
標籤：javascript 反应 反应还原 反应钩子
上一篇：如何在反應狀態下更新陣列中的值？