React useState数组仅保留API调用后数据，旧状态被覆盖如何解决？

你的问题根源在于useState的异步更新特性与闭包捕获旧状态：在UserInputAllow函数执行期间，两次调用setMessages时，都是基于函数启动时捕获的messages旧值进行扩展。第一次添加用户消息后，messages并不会立即更新；等API请求完成后，你依然用最初的旧数组来添加助手消息，这就导致助手消息直接覆盖了之前的用户消息，而非追加。

使用useState的函数式更新——给setMessages传递一个函数，该函数会接收当前最新的状态作为参数，确保每次更新都基于最新的数组状态操作。

修改后的代码如下：

const [userInput, set_userInput]= useState(false)
const [outputValue, set_outputValue]= useState(false)
const [answer, set_answer]= useState([])
const [history, set_history]= useState([])
const [newMessage, setNewMessage] = useState('');
const [messages, setMessages] = useState([])

console.log("outside of function",messages)

async function UserInputAllow(){
    set_userInput(true)
    set_outputValue(false)
    const input = document.getElementById("input").value;

    // 函数式更新：基于最新状态添加用户消息
    setMessages(prevMessages => {
        const usernewId = prevMessages.length + 1;
        return [...prevMessages, { id: usernewId,  role: "user", text: input }];
    });

    try {
        const data = {
            key:input
        }
      
        console.log("before call",data)
        const resp = await Chat_Usecase(data)
        if (resp.status === 200 || resp.status === 201){
            console.log("system chat reply",resp)
            // 函数式更新：基于最新状态添加助手消息
            setMessages(prevMessages => {
                const newId = prevMessages.length + 1;
                return [...prevMessages, { id: newId,  role: "assist", text: resp.data }];
            });
        }
    } catch (error) {
        // 建议添加错误处理，比如提示用户请求失败
        console.error("聊天请求失败:", error);
    }
}
console.log("below func",messages)

• 不要直接通过document.getElementById获取输入值，改用受控组件：将输入框值绑定到newMessage状态，更符合React数据流模式，示例：

  <input 
    id="input"
    value={newMessage}
    onChange={(e) => setNewMessage(e.target.value)}
  />
  

  之后在UserInputAllow里直接使用newMessage即可，无需操作DOM。
• 消息ID建议用时间戳或独立递增计数器生成，避免因数组长度变化（如删除消息）导致ID重复。

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