Php this.state.messages不是函数

我正在用php编写react和rest api中的聊天应用程序。但是，我得到的this.state.messages不是函数错误。我怎样才能解决这个问题。我还是react和php的新手，所以感谢您的帮助

这就是我从RESTAPI获取数据的方式，下面是我的RESTAPI代码

if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    try {
        $query = $readDB->prepare('select id, username, text from tblmessages');
        $query->execute();
        $rowCount = $query->rowCount();
        $messageArray = array();

        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $message = new Message($row['id'], $row['username'], $row['text']);
            $messageArray[] = $message->returnMessageAsArray();
        }

        $returnData = array();
        $returnData['rows_returned'] = $rowCount;
        $returnData['messages'] = $messageArray;

        $response = new Response();
        $response->setSuccess(true);
        $response->setHttpStatusCode(200);
        $response->toCache(true);
        $response->setData($returnData);
        $response->send();
        exit();
    }
    // ...

这里还有react的代码

class MessagePanel extends Component {
    state = {
        messages: [],
    }

    componentDidMount = () => {
        axios.get('http://localhost:8888/restapi/messages')
            .then(response => {
                this.setState({messages: response.data});
                console.log(this.state.messages)
            })
    }
    
    sendMessage = (mes) => {
        const headers = {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }

        const data = {
            username: this.props.username,
            text: mes
        };

        axios.post('http://localhost:8888/restapi/messages', data, {
            headers: headers
        })
            .then(response => {

                console.log(response)
            })
    };
    
    render() {
        return (
            <div className="MessagePanel">

                <Layout/>

                <SidePanel users={this.state.usernames}/>

                <DisplayMessages messages={this.state.messages} username={this.props.username}/>


                <MessageBox sendMessage={this.sendMessage} username={this.props.username}/>


            </div>
        );
    }
}


render()
{
    return (
        <div className="DisplayMessage">
            <div className='message-container'>
                {this.props.messages.map(message => {
                    return (

                        <Message key={message.id} text={message.text} username={message.username}/>


                    )
                })}
            </div>
        </div>
    );
}
}

export default DisplayMessages;

class MessagePanel扩展组件{
状态={
信息：[]，
}
componentDidMount=（）=>{
axios.get（）http://localhost:8888/restapi/messages')
。然后（响应=>{
this.setState（{messages:response.data}）；
console.log（this.state.messages）
})
}
sendMessage=（mes）=>{
常量头={
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
}
常数数据={
用户名：this.props.username，
文本：mes
};
轴心柱http://localhost:8888/restapi/messages",数据,{
标题：标题
})
。然后（响应=>{
console.log（响应）
})
};
render（）{
返回(
);
}
}
render（）
{
返回(
{this.props.messages.map（message=>{
返回(
)
})}
);
}
}
导出默认显示消息；

---

我可以看到来自后端的响应更加嵌套，因此请尝试替换

this.setState（{messages:response.data}）

与

this.setState（{messages:response.data.data[0].messages}）
当组件装载到code
console.log（this.state.messages）
@jarivak时，当我删除``{this.props.messages.map（message=>{return（）}）时，您会得到什么样的响应```并运行
console.log（this.state.messages）
如果我不删除代码并尝试运行，程序就会崩溃，我可以看到来自后端的响应更加嵌套，所以尝试替换这个.setState（{messages:response.data}）；使用此.setState（{messages:response.data.data[0].messages}）@谢谢你！这成功了！