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

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

  • 相关阅读:
    iOS 自动续期订阅 恢复购买
    iOS内购恢复购买
    iOS内购自动续订
    iOS苹果内购服务端技术方案
    Spring4.x体系架构
    Linux下MySQL主从复制(Binlog)的部署过程
    Linux下MySQL多实例部署记录
    Linux下MySQL基础及操作语法
    Linux下Nginx基础应用
    Linux下Apache(HTTP)基础知识梳理-运维笔记
  • 原文地址:https://www.cnblogs.com/peekapoooo/p/14299822.html
Copyright © 2020-2023  润新知