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

场景

有一个聊天输入框组件,输入框上面有表情包组件。

通过redux创建了store,存储一个message的状态,用于表情包和输入框共享状态。

输入框通过设置value和onClick做了一个简单双向绑定,其中value的值为store里的message。

js 复制代码
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 (
    <textarea
      value={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值为上一次的值

js 复制代码
  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不执行

相关推荐
wordbaby37 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
伍哥的传说2 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达2 小时前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing2 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy2 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码2 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
Pu_Nine_93 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
li35745 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
快乐是Happy5 小时前
分享一个非常实用的防止重复提交操作
前端·javascript