React中useState状态未更新：用户消息发送后消失问题求助

问题描述 #

开发的React聊天机器人存在以下问题：用户发送的消息仅在API返回响应前可见，获取响应后消息即消失。代码逻辑为：获取用户输入的query后，先将其存入messages数组，再将该消息传给API获取响应，响应也存入messages数组，用于渲染消息组件和满足API要求的聊天历史组件。目前chatHistory更新正常，但messages状态异常，仅能看到API返回的消息。

错误原因分析 #

问题核心出在processMessageToAPI函数更新messages状态的方式：

• 在HandleSend中，你用了函数式更新setMessages(messages => ([...messages, newMessage]))，这部分是正确的，能基于最新状态添加用户消息。
• 但在API请求的回调里，你直接用当前作用域的旧messages变量构建新数组：const newResponses = [...messages, newResponse];。由于React状态更新是异步的，当API返回响应时，这里的messages还是未包含刚添加的用户消息的旧状态，所以更新后会覆盖掉用户消息，导致其消失。

另外，chatHistory的更新虽然当前看似正常，但同样存在依赖旧状态的风险，建议统一改成函数式更新避免潜在问题。

修复后的代码 #

import { MainContainer, ChatContainer, MessageList, Message, MessageInput, TypingIndicator } from "@chatscope/chat-ui-kit-react";

import React, { useEffect } from "react";
import { useState } from "react";
import axios from "axios";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

const ChatBot = () => {

    const [messages , setMessages] = useState([
        {
            message: "Hello",
            sender: "assistant",
            direction: "incoming"
        },
    ]);

    useEffect(()=>{
        console.log(messages);
    },[messages]);

    
    const [typing, setTyping] = useState(false);
    const [chatHistory, setChatHistory] = useState([]);

    const HandleSend = async(message) => {
        const newMessage = {
            message : message,
            sender: "user",
            direction: "outgoing"
        }

        setMessages(prevMessages => ([...prevMessages, newMessage]));        

        setTyping(true);

        await processMessageToAPI(message);
    }

    async function processMessageToAPI(messageToBeSent){
        const postData = {
            query: messageToBeSent,
            hist: chatHistory
        }

        axios.post("someurl", postData,{
            headers:{
                // 你的请求头配置
            }
        }).then(res => {
            const newResponse = {
                message : res.data[0].Response,
                sender: "assistant",
                direction: "incoming"
            }

            // 用函数式更新确保基于最新messages状态添加响应
            setMessages(prevMessages => [...prevMessages, newResponse]);

            // 同样用函数式更新chatHistory，避免依赖旧状态
            setChatHistory(prevHistory => [...prevHistory, {
                "question": messageToBeSent,
                "answer": res.data[0].Response
            }]);

            setTyping(false);

        }).catch(err=>console.log(err))
    }

    return(
        <>
        <MainContainer>
            <ChatContainer>
                <MessageList typingIndicator={typing ? <TypingIndicator content="Assitant is Typing..."/> : null}>
                    {messages.map((message,i)=>{
                        return (
                        <Message key={i} style={{height:"auto"}} model={
                            {
                                type:"custom", 
                                sender: message.sender,
                                direction: message.direction
                            }}>
                            <Message.CustomContent>
                                <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                    {message.message}
                                </ReactMarkdown>
                            </Message.CustomContent>
                        </Message>)
                    })}
                </MessageList>
                <MessageInput placeholder="Type your query here..." onSend={HandleSend} attachButton="false"/>
            </ChatContainer>
        </MainContainer>
        </>
    )
}

export default ChatBot;

关键修复点 #

1. messages状态更新：在API响应回调中，将setMessages(newResponses)改为函数式更新setMessages(prevMessages => [...prevMessages, newResponse])，确保每次更新都基于最新的状态快照。
2. chatHistory状态优化：将chatHistory的更新也改为函数式更新，彻底规避异步状态更新导致的历史记录不一致问题。

内容的提问来源于stack exchange，提问作者Sunny