用户登录

useCreatePost

在项目里新建一个文件,放在 app/create 里面,名字是 hook.ts,在文件里定义一个 hook,名字是 useCreatePost,它是一个函数。

先在函数里准备两个数据,解构声明 title 还有 setTitle,用一下 useState,初始值是空白字符。再解构声明一个 content,还有 setContent,用一下 useState ,值是空白字符。

下面定义一个创建内容用的方法,名字叫 createPost,用 async 标记一下它。在它里面判断一下 title && content,如果这两个数据都有值,声明一个 response,等于 await,用一下 apiHttpClient,请求的接口是 posts,提供一个配置对象参数,把 method 设置成 POST,然后添加一个 headers ,在请求的头部里面,添加一个 Content-Type,它的值是 application/json。

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

下面判断一下 response.status 是否等于 201 ,如果是就说明成功创建了内容,解构声明 insertId,重命名为 postId,等于 await,用一下 response.json()。

下面可以在控制台上输出这个 postId。然后执行 setTitle,提供一个空白,再执行一下 setContent,提供一个空白。

最后让这个 useCreatePost 返回一个对象,里面添加一个 title,setTitle,content,setContent ,还有 createPost。

准备创建内容需要的数据与方法(useCreatePost)《 Next.js:内容管理 》

统计

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

社会化网络

关于

微信订阅号

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