时间戳

首页 > 解决方案 > setState 没有按时更新值

javascript - setState 没有按时更新值

问题描述

当我在表单中按提交时，我只能在第二次按下时得到结果。当我调试时，它看起来像 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>
    )
}

标签： javascriptreactjsreact-hooks

解决方案

我想，有了useState你，你将无法解决这个问题。由于useState尝试重新渲染组件，我认为它不会起作用。我建议你useRef改用。

useStateVSuseRef

推荐阅读