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的回调函数中，来自服务器的响应未正确放入message数组。

我已经尝试过使用一些虚假的Vraibles来执行，但是我似乎无法使服务器响应进入数组

当我登录res.data时，它会成功输出一个javascript对象

编辑：

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

Answer 1

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

Answer 2

如果setState依赖于旧状态（如当前情况），请始终使用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)))
}

正在等待服务器在setState

2 个答案: