场景

有一个聊天输入框组件，输入框上面有表情包组件。
通过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不执行