反应-视图在setState之后不更新

Question

很长一段时间以来我一直在使用React组件，但是由于某种原因，在执行ajax调用并设置状态后，我的视图没有更新。

因此，基本上，我的状态为clients，开头是一个空数组。在生命周期方法componentDidMount中，我进行了ajax调用，在.then中，我将状态设置为响应。但是由于某种原因，由于p标签说“没有客户”仍然存在，因此视图没有得到更新，并且我编写的map函数没有输出任何结果。

我确定clients状态已更新，因为我在设置状态后用console.log记录了结果。此外，在我的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.log(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;

我想念什么吗？