Javascript React组件在没有事件的情况下不渲染

我正在学习React，并且正在做一个个人项目，在这个项目中，我正在使用api.ai代理创建聊天机器人。我在我的项目中使用api.ai npm包，用户可以在其中提问，我的代理将根据问题回答答案。我正确地从代理处获得响应，但直到出现按键事件，响应才会呈现在页面中

下面是我的代码

    import React, {
Component
} from 'react';
import ChatMessageComposer from 
'../ChatMessageComposer/ChatMessageComposer';
 import ChatHistory from '../ChatSection/ChatHistory/ChatHistory';
 import apiai from 'apiai-promise';
class Chat extends Component {
state = {
    messages: [], //[{from: 'bot', message: 'Hi'}]
    inputValue: ''
}
atKeyPress = (event) => {
    if (event.key !== 'Enter') {
        return;
    }
    this.setState((prevState) => {
        prevState.messages.push({
            message: this.state.inputValue,
            from: 'you'
        })
    })

    let data = this.state.inputValue;
    var app = apiai("");

    app.textRequest(data, {
        sessionId: ''
    }).then((response) => {
        console.log(response);
        this.setState((prevState) => {
            prevState.messages.push({
                message: response.result.fulfillment.speech,
                from: 'bot'
            })
        })
    }).catch((error) => {
        console.log(error);
    })


    this.setState({
        inputValue: ''
    });

}
render() {
    console.log("here ", this.state.messages)
    return (<
        div >
        <
        ChatHistory messages={
                this.state.messages
            } > < /ChatHistory> <
        ChatMessageComposer 
                changed={
                    (event) => this.setState({
                        inputValue: event.target.value
                    })
                }
                atKeyPress={
                    (event) => this.atKeyPress(event)
                }
                value={
                    this.state.inputValue
                }

            >
                < /ChatMessageComposer> <
        /div>

    )
}

这是chatmessagecomposer组件

    export default Chat;
    const chatMessageComposer = (props) => {
    return (
    <div className={classes.Chatinput}>
    <input placeholder="Talk to me..." className={classes.Userinput}                 type="text" value={props.value} onChange={props.changed} onKeyPress=        {props.atKeyPress}/>
    </div>
    )
    }
   const chatHistory = (props) => (
   <div className={classes.ChatOutput}>
   {props.messages.map((message, i)=>(
   <ChatMessage key={i} message={message} />
  ))}
  </div

导出默认聊天；
const chatMessageComposer=（道具）=>{
返回(
)
}
常量聊天历史=（道具）=>(
{props.messages.map（（message，i）=>(
))}
您没有在
setState
方法调用中返回变异状态。请尝试执行此操作

this.setState((prevState) => {
        prevState.messages.push({
            message: response.result.fulfillment.speech,
            from: 'bot'
        })
        return prevState; 
    })

您没有在
setState
方法调用中返回变异状态。请尝试执行此操作

this.setState((prevState) => {
        prevState.messages.push({
            message: response.result.fulfillment.speech,
            from: 'bot'
        })
        return prevState; 
    })

你也不应该改变状态。复制/创建一个新的状态对象。你是对的。他根本不应该在组件中保存状态，也许吧。你知道，使用redux？但我试图建议他为使代码正常工作所能做的最低限度。他说他毕竟是个新手谢谢@hunaidHassan，它可以工作：。我会在我感到舒服的时候尝试redux有了它，你也不应该改变状态。复制/创建一个新的状态对象。你是对的。他根本不应该在组件中保存状态，也许吧。你知道，使用redux？但我试图建议他为使代码正常工作所能做的最低限度。他说他毕竟是个新手。谢谢@hunaidHassan，它起作用了：。一旦我感到舒服，我会尝试使用redux能适应它吗