Question

当我按表单中的“提交”时，仅在第二次按中获得结果。当我调试时，它看起来像setState仅在第二次更新userId时才更新状态，但是我希望它等待直到状态被更新（以便将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} 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>
    )
}

Answer 1

我认为，使用useState将无法解决此问题。由于useState尝试重新渲染组件，因此我认为它不起作用。我建议您改用useRef。

useStateVSuseRef

setState不能按时更新值

1 个答案: