我正在使用 nextjs 作為前端和 CodeIgniter 作為后端來制作 crud 我正在關注前端是 reactjs 的教程。在 reactJs 中，當 crud 的更新部分到來時，我們可以使用 react-router-dom useParam 函式來獲取 ID，但在 nextJS 中，我們使用 router.query 并且它不起作用，所以我現在被困在如何獲取 id更新它的特定列
const { id } = router.query;
const getProductById = async () => {
// if (id !== undefined && id != null && id > 0) {
const response = await axios.get(`http://localhost:8080/companies/${id}`);
setName(response.data.name);
setCreatedBy(response.data.createdBy);
console.log(id);
// }};
這是我正在使用的代碼，它給出了一個錯誤
`http://localhost:8080/companies/undefined`
uj5u.com熱心網友回復：
您可以在服務器端獲取 query.id，然后將其傳遞給客戶端
export async function getServerSideProps(context) {
const { id } = context.query;
console.log(`query id: ${id}`);
return { props: { id } };
}
現在id作為道具傳遞給客戶端：
const YourComponent=(props)=>{
console.log("passed id prop",props.id)
}
uj5u.com熱心網友回復：
路由器查詢在第一次渲染時可以為空，在靜態優化頁面上。嘗試將代碼包裝在useEffect
useEffect(()=>{
const { id } = router.query;
const updateProduct = async (e) => {
e.preventDefault();
await axios.patch(`http://localhost:8080/companies/${id}`, {
company_name: name,
created_by: createdBy,
});
router.push("/products");
};
},[router.query])
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/440912.html
標籤：mysql 反应 代码点火器 下一个.js 下一个路由器