Реагировать - просмотр не обновляется после setState

Я давно работаю над компонентом React, но по какой-то причине мое представление не обновляется после вызова ajax и установки состояния.

Итак, в основном у меня есть состояние clients, которое вначале является пустым массивом. В методе жизненного цикла componentDidMount я выполняю вызов ajax, а в обещании .then я устанавливаю состояние для ответа. Но по какой-то причине представление не обновляется, поскольку тег p, говорящий «нет клиентов», все еще существует, а функция map, которую я написал, не выводит никаких результатов.

Я уверен, что состояние clients обновлено, так как я console.info результат после установки состояния, а также в моих инструментах разработки React я вижу, что состояние клиентов имеет 1 элемент.

Для контекста я использую этот компонент в проекте Laravel, но я думаю, это не имеет никакого значения.

Мой код

import React, { Component } from 'react';

class Clients extends Component {


    constructor(props) {
        super(props);
        this.state = {
            clients: [],
        };
    }

    componentDidMount() {
        this.getClients();
    }


    getClients() {
        axios.get('/oauth/clients')
            .then(({data}) => {
                this.setState({
                    clients: data,
                }, () => {
                    console.info(this.state.clients);
                });
            });
    }


    render() {

        const clients = this.state.clients;

        return (

            <div>
                {/* Begin card */}
                <div className = "card card-default">

                    <div className = "card-header">
                        <div style = {flex}>
                            <span>
                                OAuth Clients
                            </span>

                            {/* <a class = "action-link" tabindex = "-1" @click = "showCreateClientForm"> */}
                            <a className = "action-link" tabIndex = "-1">
                                Create New Client
                            </a>
                        </div>
                    </div>

                    <div className = "card-body">

                        { clients.length === 0 &&
                            <p className = "mb-0">
                                You have not created any OAuth clients.
                            </p>
                        }

                            <table className = "table table-borderless mb-0">
                                <thead>
                                    <tr>
                                        <th>Client ID</th>
                                        <th>Name</th>
                                        <th>Secret</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>

                                <tbody>
                                    { clients.map(client => {

                                        return (

                                            <tr key = {client.id}>

                                                <td style = {alignMiddle}>
                                                    {client.id}
                                                </td>

                                                <td style = {alignMiddle}>
                                                    {client.name}
                                                </td>

                                                <td style = {alignMiddle}>
                                                    {client.secret}
                                                </td>

                                                <td style = {alignMiddle}>
                                                    <a className = "action-link" tabIndex = "-1">
                                                        Edit
                                            </a>
                                                </td>

                                                <td style = {alignMiddle}>
                                                    <a className = "action-link text-danger">
                                                        Delete
                                            </a>
                                                </td>
                                            </tr>

                                        );

                                    }) }
                                </tbody>
                            </table>

                    </div>

                </div>
                {/* End card  */}
            </div>

        );
    }
}


// Styles
const flex = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
};

const alignMiddle = {
    verticalAlign: 'middle',
};

export default Clients;

Я что-то пропустил?