用户登录

新建一个文件,放在 app/posts/[id]/edit 目录的下面,名字是 hook.ts。在文件里自定义并且导出一个 hook,名字是 useEditPost,让它接收一个 postId 参数,类型是 string。

在它里面先准备两个数据,解构声明 title,还有 setTitle,用一下 useState,默认值是一个空白,再解构声明 content,还有 setContent,用一下 setState,默认值也是空白。

然后声明一个 router,用一下 next/navigation 这个包里提供的 userRouter()。

请求数据

在内容编辑页面需要显示正在编辑的内容相关的数据,这里我们可以用一个 useEffect,提供一个函数参数,然后设置一下它的依赖,一个数组,里面添加一个 postId。

在这个 effect 里面,用一下 getPostById 这个函数,把 postId 交给它,然后用一个 then ,提供一个函数参数,解构一下得到的数据,需要的是 title 还有 content。在这个函数里面,执行 setTitle,把 tilte 交给这个函数,再执行 setContent,把 content 交给它。

editPost

下面定义一个编辑内容用的方法,名字叫 editPost,在它里面先判断一下 title 是否有值,如果有,可以声明一个 response,等于 await,用一下 apiHttpClient,这里我们需要用 async 标记一下 editPost 这个函数。

再设置一下请求的接口, posts/${postId},提供一个对象参数,把 method 设置成 'PATCH',再设置一下 headers,在它里面添加一个 Content-Type,对应的值是 application/json。

然后设置一下请求里带的主体数据,添加一个 body 属性,它的值可以用一下 JSON.stringify ,提供一个对象,里面添加一个 title 还有 content。

请求完成以后,判断一下 response.status 是不是等于 200,如果是的话可以执行一下 router.push,地址是 /posts/${postId}。

最后让这个 hook 返回一个对象,里面添加一个 title,一个 setTitle,还有 content,setContent ,还有编辑内容用的 editPost。

准备编辑内容需要的数据与方法(useEditPost)《 Next.js:内容管理 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点