1.19 分步提交表单(伪) useEffect+异步函数 保存聊天记录

中途提交表单(useEffect做法)

if(file){
	await _.resume(roomToken, file)//上传简历,完成后进行下一步
	ajax.fetchSata().then:setFieledsValue
}

这次的需求是这样,一个表单,想要在提交简历后就开始解析信息(而不是等到整个表单提交时再进行解析

那么可以灵活利用React的useEffect钩子,当表示简历的状态file变化时,若有简历,则发送、解析。

后续提交整个表单时,只要进行数据update即可。

useEffect中使用异步函数

刚刚那个需求,在写useEffect时,我本想用异步函数的,但是报错了:

Argument of type '() => Promise<void>' is not assignable to parameter of type 'EffectCallback'.

useRffect(async () =>{
	//do sth.
})

(所以为了赶紧看到效果 先写了Promise连锁。

原因:异步函数始终返回Promise对象

当明确return 一个数字时,这个数字会被Promise.resolve()包裹,也就是[[PromiseResult]]的值是返回的那个值。(没有明确返回就是undefined,总之是返回一个Promise啦。

那样

useRffect(async () =>{
	//do sth.
})

||
/

useEffect(()=>{
	//do sth.
	return Promise
})

都知道useEffect体中的返回的函数是用于进行清除的,这样就会被提示这样不对。

想要使用异步:

useEffect(()=>{
	async function f(){};//声明
	f();//执行
})
//或者直接使用立即执行函数
useEffect(()={
	//还没学晚点补……
})

保存聊天记录

需求就是刷新网页聊天记录不丢失,那就考虑使用浏览器存储来做。用sessionStorage来做的。

其实不是很难的,就是发送的信息是一个一个对象,先用JSON.stringfy()来转成字符串,因为sessionStorage中键值对要求值是字符串,然后使用的时候用JSON.parse()将刚刚存下来的字符串转成对象。

逻辑方面就是使用useEffect,当对话信息增加时进行setItem,当网页挂载时进行getItem,再一条一条重新append就可以了。

说一下我自己做的憨憨事,两件

第一件是觉得这是使用useEffect的清除功能的大好时机,所以把setItem放在返回函数里面。但是因为unmount太快了,每次都来不及完成Set……(如果是这样,那这个清除功能还有什么用啊

第二件是,改了逻辑,把useEffect的执行逻辑时机改成了信息变化时执行。这样就,useEffect开始疯狂执行了,因为内部的包含了改变信息的行为,就反复触发了,不一会儿浏览器就卡死了。

所以后来还是把这两个事情分开来做了。

原文地址:https://www.cnblogs.com/peekapoooo/p/14299822.html