Javascript 正在setState中等待服务器的响应

我有一个聊天机器人，我想用ReactJS实现它

我有这样一种状态：

 state={
    currentMessage: {
        content: '',
        user: '', 
    },
    messages: []
}

其思想是，用户可以在状态下向

messages[]

添加消息，并且还将添加来自服务器的响应

到目前为止，我有这个

 addMessageHandler = () =>{
    const message = this.state.currentMessage
    console.log(message.content.length)
    if(message.content.length > 5 && whiteSpaceValidation(message.content)){
        this.setState(prevState =>({
            messages: [...this.state.messages, this.state.currentMessage],
            }), () => this.getResponseHandler()
        )
    }
}

getResponseHandler = () =>{
    console.log('in handler', )
    axios.post('http://localhost:5000/chatbot',  {message: this.state.currentMessage.content})
    .then(res => this.setState(prevState =>({
        messsages: [...this.state.messages, res.data],
        currentMessage: {
                content: '',
                user: ''
            }, 
            loading: false
    }),  () => console.log(res.data)))
}

UserInputet消息被正确地放入数组中，但是在我的第一个

setState

回调函数中，来自服务器的响应没有正确地放入消息数组中

我尝试了一些虚拟虚拟磁盘，它们执行得很好，但似乎无法将服务器响应放入阵列中

当我记录

res.data

时，它成功地输出了一个javascript对象

编辑：

我以前用套接字尝试过不同的实现，哪一种可能更好？

---

在第二个

设置状态（）

中，您的

消息

属性有3个

属性
如果设置状态依赖于旧状态，如当前情况，请始终使用prevState而不是this.state。React将确保不会发生冲突

 addMessageHandler = () =>{
    const message = this.state.currentMessage
    console.log(message.content.length)
    if(message.content.length > 5 && whiteSpaceValidation(message.content)){
        this.setState(prevState =>({

            // use prevState instead of this.state
            messages: [...prevState.messages, prevState.currentMessage],
            }), () => this.getResponseHandler()
        )
    }
}

getResponseHandler = () =>{
    console.log('in handler', )
    axios.post('http://localhost:5000/chatbot',  {message: this.state.currentMessage.content})
    .then(res => this.setState(prevState =>({

        // use prevState instead of this.state
        messages: [...prevState.messages, res.data],
        currentMessage: {
                content: '',
                user: ''
            }, 
            loading: false
    }),  () => console.log(res.data)))
}

欢迎光临，如果答案解决了您的问题，请验证答案