Javascript 反应-视图不'；设置状态后不更新

很长一段时间以来，我一直在使用React组件，但由于某种原因，在执行

ajax

调用并设置状态后，我的视图没有更新

因此，基本上，我有一个

clients

的状态，它在开始时是一个空数组。在生命周期方法

componentDidMount

中，我执行一个

ajax

调用，然后在

中设置响应的状态。但是由于某种原因，视图没有得到更新，因为显示“没有客户端”的
p
标记仍然存在，并且我编写的
map
函数没有输出任何结果

我确信
clients
状态已更新，因为我在控制台中记录了设置状态后的结果，而且在我的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;

import React，{Component}来自'React'；
类客户端扩展组件{
建造师（道具）{
超级（道具）；
此.state={
客户：[]，
};
}
componentDidMount（）{
这是getClients（）；
}
getClients（）{
get（'/oauth/clients'）
。然后（{data}）=>{
这是我的国家({
客户：数据，
}, () => {
console.log（this.state.clients）；
});
});
}
render（）{
const clients=this.state.clients；
返回(
{/*开始卡*/}
OAuth客户端
{/*  */}
创建新客户端
{clients.length==0&&

您尚未创建任何OAuth客户端。

}
客户端ID
名称
秘密
{clients.map（client=>{
返回(
{client.id}
{client.name}
{client.secret}
编辑
删除
);
}) }
{/*结束卡*/}
);
}
}
//风格
常数flex={
显示：“flex”，
justifyContent:'之间的空间'，
对齐项目：“居中”，
};
常量alignMiddle={
垂直排列：'中间'，
};
导出默认客户端；

我是否遗漏了什么？
请求是否成功？您是否尝试在axios回调中记录数据？可能请求失败，您需要一个
catch
来查看它
.catch（error=>console.error（error）
。也可能是
data
在响应中是一个空数组。那么
（{data}）
与
（data）
？我的意思是，如果响应可能不是：
{data:[这里的客户机]}
@Tholle如上所述，我确信客户端状态已更新，因为我在设置状态后对
this.state.clients
进行了
控制台.log
操作。我添加了一个捕获，但正如我所说，我非常确定状态已更新，因此我没有收到任何错误。@num8er不，通常您会收到
响应rom是一个
ajax
调用。在
response
对象中，您得到了一个包含所有数据的
data
对象。使用
{data}
将分解对象结构，因此我不必使用
response.data
。在这里了解更多信息。非常有趣。