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

news/2024/12/23 0:28:49/

场景

在这里插入图片描述
有一个聊天输入框组件,输入框上面有表情包组件。
通过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.ppmy.cn/news/1434546.html

相关文章

在android 源代码中 使用gradlew 编译android 模块

gradle 编译子模块 在Gradle中编译子模块通常涉及到以下步骤&#xff1a; 1、确保你的项目结构是模块化的&#xff0c;每个子模块都是一个独立的目录2、在项目的根目录下的setting.gradle文件中&#xff0c;包含需要编译的子模块。例如&#xff1a;include ‘:submodule-name…

ctfshow web入门 web180--web185

web180 import requests import recom re.compile("admin") def repisTrue(char):url f"http://自己环境的网址/api/?id1%27and%27{char}%27%27{char}&page1&limit10"res requests.get(url)w com.search(res.text)if w is not None:return T…

(delphi11最新学习资料) Object Pascal 学习笔记---第10章第1节(属性的代码补全)

10.1.3 属性的代码补全 ​ 给类添加属性是一项繁琐的工作&#xff0c;IDE的编辑器可以让你在编写属性声明的初始部分&#xff08;在类内部&#xff09;时轻松自动完成属性&#xff0c;如下所示&#xff1a; typeTMyClass classpublicproperty Month : Integer;end;​ 在光标…

PyTorch and Stable Diffusion on FreeBSD

Stable Diffusion在图像生成领域具有广泛的应用和显著的优势。它利用深度学习和扩散模型的原理&#xff0c;能够从随机噪声中生成高质量的图像。 官网&#xff1a;GitHub - verm/freebsd-stable-diffusion: Stable Diffusion on FreeBSD with CUDA support FreeBSD下难度主要…

【QT学习】9.绘图,三种贴图,贴图的转换,不规则贴图(透明泡泡)

一。绘图的解释 Qt 中提供了强大的 2D 绘图系统&#xff0c;可以使用相同的 API 在屏幕和绘图设备上进行绘制&#xff0c;它主要基于QPainter、QPaintDevice 和 QPaintEngine 这三个类。 QPainter 用于执行绘图操作&#xff0c;其提供的 API 在 GUI 或 QImage、QOpenGLPaintDev…

网络基础-TCP/IP和OSI协议模型

一、OSI和TCP/IP模型 二、OSI七层模型 三、TCP/IP模型 参考&#xff1a;https://www.cnblogs.com/f-ck-need-u/p/7623252.html

怎么使用yolov8进行图片识别,分类,分割,视频追踪

目录 一:简介 二:图片识别 三:图片分类 四:图片分割 五:姿态

力扣HOT100 - 199. 二叉树的右视图

解题思路&#xff1a; 相当于层序遍历&#xff0c;然后取每一层的最后一个节点。 class Solution {public List<Integer> rightSideView(TreeNode root) {if (root null) return new ArrayList<Integer>();Queue<TreeNode> queue new LinkedList<>…