javascript - 在 setState 中等待服务器的响应

Question

我有一个聊天机器人，我想使用 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)))
}

userinputtet 消息被正确放入数组中，但在我的第一个回调函数中setState，来自服务器的响应未正确放入消息数组中。

我已经尝试过一些可以正常执行的虚拟变量，但我似乎无法让服务器响应进入数组

当我记录res.data它成功输出一个javascript对象

编辑：

我以前尝试过使用套接字的不同实现，这可能会更好？

标签： javascriptreactjsaxios

Answer 1

在您的第二个setState()中，您的messages属性有 3 s。