反应-视图在设置状态后不更新

很长一段时间以来,我一直在处理一个React组件,但是由于某些原因,我的视图在执行一个 ajax

所以,基本上,我有一种 clients 开头是一个空数组。在生命周期方法中 componentDidMount 打电话进来 .then 答应我把状态设置为响应。但由于某些原因,自 p 标签上写着“没有客户”仍然存在,而且 map

我相信 客户 状态已更新,因为控制台.log设置状态后的结果,以及在我的React dev工具中,我可以看到clients状态有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;

我错过什么了吗?