this.state.messages 不是函数

Question

我正在 php 中用 react 和 rest-api 编写一个聊天应用程序。但是我收到 this.state.messages is not a function 错误。我怎样才能解决这个问题。我在 React 和 php 方面还是新手，所以感谢您的帮助。

enter image description here

这就是我从 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;

enter image description here

Answer 1

可以看出后端的响应比较嵌套，所以尝试替换

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

和

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

this.state.messages 不是函数

this.state.messages is not a function

php

rest

reactjs

map-function