Ожидание ответа от сервера в 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 ответ от сервера не помещаетсяправильно в массив сообщений.

Я пытался с некоторыми фиктивными vraibles, которые выполняются нормально, но я не могу получить ответ сервера в массив

, когда я регистрирую res.data, он успешно выводит объект javascript

РЕДАКТИРОВАТЬ:

Я пробовал другую реализацию с сокетами ранее, что может работать лучше?

Answer 1

Во втором setState() ваш атрибут messages имеет 3 s.

Answer 2

Если ваш setState зависит от старого состояния, как ваш текущий случай, всегда используйте prevState вместо this.state. Реакт обеспечит отсутствие конфликта.

 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)))
}