Javascript 设置状态为'；不要及时更新值

当我在表单中按submit时，我只在第二次按时得到结果。 当我删除bug时，它看起来像是在第二次userId中设置state更新状态），但我希望它等待状态更新（这样userId将更改为新值），然后才将其发送到axios请求

  
import axios from 'axios';

class MessageServices {
    constructor(){
        this.url = 'http://localhost:3001/messaging/';
    }
    //get messages from server
    getUserMessages = async (userId) => {
        return await axios.get(`${this.url}get-all-messages/${userId}`);
    }       
    //add new message to server 
    setUserMessage = async (msg) => {
        await axios.post(`${this.url}write-message`, msg);
    }  

}
//show only instance and not all the class
export default new MessageServices();

import React，{useState}来自“React”；
从“axios”导入axios；
从“./Message”导入{Message}；
从“../services/MessageServices”导入MessageServices
export const AllMessages=（）=>{
const[messagesState，setMessages]=useState（[]）；
const[userId，setUser]=useState（“”）；
const getAllMessages=async（事件）=>{
如果（事件）{
event.preventDefault（）；
等待setUser（event.target.elements.userInput.value）；
}
const userMessages=wait MessageServices.getUserMessages（userId）；
if（userMessages.data）{
...
}否则{
...
}
}
const handleDelete=异步（id，接收器）=>{
设obj={
“id”：id，
“接收者”：接收者，
};
等待axios。删除（“http://localhost:3001/messaging/delete-消息“，{data:obj}）；
getAllMessages（）；
};
返回(
插入名称
插入名称并获取所有消息

显示消息

...
)
}

使用

useState

我认为您将无法解决此问题。 由于

useState

尝试重新渲染组件，我认为它不会工作。 我建议您改用

useRef

---

您是否尝试使用useRef而不是useState？

import React,{useState} from 'react';
import axios from 'axios';
import {Message} from './Message';
import MessageServices from '../services/MessageServices'

export const AllMessages = () => { 
    const [messagesState, setMessages] = useState([]);
    const [userId, setUser] = useState("");

    const getAllMessages = async (event) =>{
        if(event){
            event.preventDefault();
            await setUser(event.target.elements.userInput.value);
        }
        const userMessages = await MessageServices.getUserMessages(userId);
        if(userMessages.data){
            ...
            
        }else{
            ...
        }
    }

    const handleDelete = async (id,receiver) => {
        let obj = {
            'id': id,
            'receiver': receiver,
        };
        await axios.delete("http://localhost:3001/messaging/delete-message",{ data: obj });
        getAllMessages();
    };

    return(
        <form onSubmit={getAllMessages}>
        <div className="message-style">
            <div className="tm-bg-circle-white tm-flex-center-v">
                <header className="text-center">
                    <h1 className="tm-site-title">Insert name</h1>
                    <input type="text" id="userInput" name="userInput"/>
                    <p className="tm-site-subtitle">Insert the name and get all messages</p>
                </header>
                <p className="text-center mt-4 mb-0">
                    <button type="submit" className="btn tm-btn-secondary">Show Messages</button>
                </p>
            </div>
            ...
            </div>
        </div>
        </form>
    )
}