this.state.messages не является функцией

Question

Я пишу приложение для чата в react и rest-api в php. Однако я получаю this.state.messages не является ошибкой функции. Как я могу это исправить. Я все еще новичок в React и php, поэтому спасибо за вашу помощь.

введите описание изображения здесь

введите описание изображения здесь

Вот как я получаю данные из rest-api, и вот мой код для rest-api

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();
    }
    // ...

, а также код для реакции

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;

введите описание изображения здесь

Answer 1

Я вижу, что ответ от бэкэнда более вложен, поэтому попробуйте заменить

this.setState({messages: response.data});

на

this.setState({messages: response.data.data[0].messages})