问题:react函数中的state是上一次的值

场景

在这里插入图片描述
有一个聊天输入框组件,输入框上面有表情包组件。
通过redux创建了store,存储一个message的状态,用于表情包和输入框共享状态。
输入框通过设置value和onClick做了一个简单双向绑定,其中value的值为store里的message。

import { update } from "@/features/messageSlice";
import { useStoreSelector, useStoreDispatch } from "@/hooks/store";
const ChatInput: React.FC = () => {const message = useStoreSelector((state) => state.message.value);const dispatch = useStoreDispatch();return (<textareavalue={message}onChange={(e) => {const val = (e.target as HTMLTextAreaElement).value;dispatch(update(val));}}className="chatInput"style={{width: "100%",resize: "none",outline: "none",border: "none",}}></textarea>);
};
export default ChatInput;

表情包组件做了一个方法,选择表情包时通过回调传回值与message值做拼接,结果message值为上一次的值

  const message = useStoreSelector((state) => state.message.value);console.log("message1", message);const dispatch = useStoreDispatch();const onSelectContent = (ct: any) => {console.log("message2", message);dispatch(update(message + ct.emoji));//message为上一次的值};retu

结果:当我输入一段文字后,添加一个表情包,再输入一段文字,再添加一个表情包时。。就会覆盖掉前一段文字。

个人尝试:设置一个state存储选择的表情包,然后通过useEffect监听state的变化更新message。结果出现新bug,那就是不能重复选择表情包,因为state不改变导致useEffect不执行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/824192.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT写作术:高效撰写顶级论文

ChatGPT无限次数:点击直达 ChatGPT写作术&#xff1a;高效撰写顶级论文 在当今信息爆炸的时代&#xff0c;如何撰写出高质量的论文成为许多研究者和学生的重要课题。借助人工智能技术的不断发展&#xff0c;像ChatGPT这样的语言生成模型能够为撰写论文提供有效的帮助。本文将介…

【Java框架】Spring框架(三)——Spring整合Mybatis及Spring声明式事务

目录 回顾Mybatis和新对象思路整理 Spring和MyBatis的整合步骤1. 创建Web工程&#xff0c;导入Spring和MyBatis的相关依赖2. 建立开发目录结构&#xff0c;创建实体类3. 创建数据访问接口和SQL映射语句文件4. 使用Spring配置文件配置数据源4.1 database.properties4.2spring配置…

全国产化无风扇嵌入式车载电脑在救护车远端诊断的行业应用

救护车远端诊断的行业应用 背景介绍 更加快速的为急症病人在第一时间开始进行诊断和治疗,是提高病人救助成功率的关键。因此&#xff0c;先进的救护系统正在思考&#xff0c;如何在病人进入救护车之后&#xff0c;立刻能够将救护车中各种检查仪器的信息快速的传回医院&#xf…

aws云靶场和一些杂记

aws靶场 在AWS靶场中&#xff0c;存在三个安全问题&#xff1a;1) 一个S3存储桶政策配置错误&#xff0c;允许公共访问&#xff0c;通过访问特定域名可获取flag。2) SQS消息队列的政策没有限制角色&#xff0c;允许发送和接收消息&#xff0c;通过aws sqs命令行工具的receive-…

Javaweb知识之AJAX的概念的通俗理解(包含axios)

AJAX 一.概念&#xff1a; AJAX&#xff08;Asynchronous JavaScript And XML&#xff09;&#xff1a;异步的JavaScript和XML 异步 JavaScript的理解&#xff1a;就像你给朋友发了一条消息&#xff0c;然后继续做其他事情一样。你不需要等待朋友回复&#xff0c;可以继续做自…

JS-42-Node.js01-Node.js介绍

一、浏览器大战 众所周知&#xff0c;在Netscape设计出JavaScript后的短短几个月&#xff0c;JavaScript事实上已经是前端开发的唯一标准。 后来&#xff0c;微软通过IE击败了Netscape后一统桌面&#xff0c;结果几年时间&#xff0c;浏览器毫无进步。&#xff08;2001年推出…

C++面向对象程序设计-北京大学-郭炜【课程笔记(七)】

C面向对象程序设计-北京大学-郭炜【课程笔记&#xff08;七&#xff09;】 1、类型转换运算符2、自增、自减运算符的重载3、继承和派生的基本概念3.1、基本概念3.2、派生类对象的内存空间 4、继承关系和复合关系4.1、继承关系的使用4.2、复合关系的使用 5、派生类覆盖基类成员6…

《论文阅读》基于情感原因感知的共情对话生成模型 2023 AAAI

《论文阅读》基于情感原因感知的共情对话生成模型 2023 AAAI 前言简介模型构架情绪推理器回复生成器实验结果前言 亲身阅读感受分享,细节画图解释,再也不用担心看不懂论文啦~ 无抄袭,无复制,纯手工敲击键盘~ 今天为大家带来的是《The Empathic Dialogue Generation Model…

npm ERR! code CERT_HAS_EXPIRED (创建vue过程)

npm ERR! code CERT_HAS_EXPIRED &#xff08;创建vue过程&#xff09; 起因&#xff1a;卸载 npm uninstall -g vue-cli时候发现报这个错误。 当我们创建vue之前&#xff0c;使用npm更新或者安装啥的时&#xff0c;出现此类提示&#xff0c;则表明&#xff0c;用来验证和网络加…

VSCode和CMake实现C/C++开发

VSCode和CMake实现Ubuntu下C/C++开发总结 目录 0.简介1.Linux系统介绍2.开发环境搭建2.1 编译器,调试器安装2.2 CMake安装3.GCC编译器3.1 编译过程3.2 g++重要编译参数4.g++编译实战4.0 编译前4.1 直接编译4.2 生成库文件并编译4.3 编译后4.3.1 编译完成后的目录结构4.3.2 运行…

ChatGPT改写:论文写作新时代

ChatGPT无限次数:点击直达 ChatGPT改写&#xff1a;论文写作新时代 随着人工智能技术的不断发展&#xff0c;论文写作也进入了新的时代。ChatGPT作为一种强大的自然语言处理模型&#xff0c;在论文写作领域展现出巨大潜力。本文将探讨ChatGPT在论文写作中的应用和影响&#xf…

网络面试相关

GET和POST请求的区别 1、get请求一般是去取获取数据&#xff08;其实也可以提交&#xff0c;但常见的是获取数据&#xff09;&#xff0c;post请求一般是去提交数据。 2、get因为参数会放在url中&#xff0c;所以隐私性&#xff0c;安全性较差&#xff0c;请求的数据长度是有…

Unity 线程相关知识

线程 线程介绍 通过线程执行函数和直接在主函数中调用函数的区别是&#xff1a;通过直接调用函数时会按照语句顺序逐句执行&#xff0c;必定会完成上一句后再执行下一句&#xff0c;而通过线程执行的函数会从调用开始与主函数同步执行 调用线程的方式 调用无参数函数线程的…

.NET Core中间件管道MAP的作用和使用

在ASP.NET Core中&#xff0c;中间件是构建HTTP请求管道的基本组件。中间件组件负责在ASP.NET Core应用程序中处理请求和响应。中间件可以执行多种任务&#xff0c;例如身份验证、记录、异常处理等。你可以按顺序将多个中间件组件组合在一起&#xff0c;形成一个请求处理管道。…

java读取Excel表格数据

java读取Excel表格数据 环境说明项目结构1.controller层2.service层实现层StudentModel.java类 使用的Maven依赖效果示例一效果示例二文档截图第一页第二页 postman请求说明其他说明 环境说明 jdk1.8&#xff0c;springboot2.5.3 项目结构 1.controller层 package com.exam…

Taro-vue微信小程序用户隐私保护

Taro-vue微信小程序用户隐私保护 一、在 微信公众平台的【设置】- 【服务内容与声明】 &#xff0c;设置用户隐私保护指引&#xff0c;添加项目需要的接口权限。 【用户隐私保护指引】提交之后&#xff0c;官方会进行审核。审核通过之后&#xff0c;对应的接口权限才会生效。 …

区块链安全应用----压力测试

通过Caliper进行压力测试程序 1.环境配置 第一步. 配置基本环境 部署Caliper的计算机需要有外网权限&#xff1b;操作系统版本需要满足以下要求&#xff1a;Ubuntu > 16.04、CentOS > 7或MacOS > 10.14&#xff1b;部署Caliper的计算机需要安装有以下软件&#xff…

【C语言回顾】函数

前言1. 函数的概念和分类2.库函数3. 自定义函数3.1 自定义函数的简单介绍3.2 自定义函数举例 4. 形参和实参4.1 形参4.2 实参4.3 形参和实参的关系4.3.1 理解4.3.2 举例代码和调试 5. 嵌套函数和链式访问5.1 嵌套函数5.2 链式访问 6. 函数的声明和定义6.1 单个文件6.2 多个文件…

Pandas连接MySQL数据库

pandas是一个强大的Python工具包&#xff0c;能够快速帮助我们做很多数据处理。但是在利用pandas连接数据库时&#xff0c;也会遇到很多问题&#xff0c;在此我总结了一个相对较为简单的连接范式&#xff0c;供大家参考学习。 先上代码&#xff1a; import pandas as pd# 数据…

ChatGPT在遥感领域中的应用

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本课程重点介绍ChatGPT在遥感中的应用&#xff0c;人工智…