zoukankan      html  css  js  c++  java
  • 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开始疯狂执行了,因为内部的包含了改变信息的行为,就反复触发了,不一会儿浏览器就卡死了。

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

  • 相关阅读:
    SQL必知必会-笔记(五)函数
    软件测试面试题:系统中的图片不显示如何排查原因
    windows用浏览器访问linux目录文件
    记测试工作中一次印象深刻的事
    怎么快速适应新的测试工作?
    xshell如何导出日志文件和上传文件
    jmeter+fiddler高效率整理接口脚本
    python-用requests库处理form-data格式的参数
    软件自动化测试工程师面试题集锦(4)
    shell脚本批量检查某个或多个服务的端口和进程是否正常
  • 原文地址:https://www.cnblogs.com/peekapoooo/p/14299822.html
Copyright © 2011-2022 走看看