从api调用获取数组以填充状态

当我的组件加载时,我调用我的webapi,它返回一个客户端数组。我需要将这个数组加载到state中,然后用一个客户端列表呈现我的屏幕。

所以,在我的构造函数中,我创建了我的默认状态。

export default class Clients extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clients: [{
               id: null,
               username: null,
               name: null
           }]
       }

然后,我需要尽快调用我的api,填充我的状态,以便在屏幕上显示我的列表。所以我把api调用和setstate放入 componentWillMount

componentWillMount() {
    const request = {
        method: 'GET',
        URL: `${Server.ApiURL}/api/admin/clients`
    };
    console.log('Calling fetch....', this.state);

    fetchData(request)
    .then((data) => {
        console.log("Data recieved!", data);
         this.setState(
                     { clients : data });
    });
}

在我的日志行中,我说“data is received”(数据已接收)显示的是控制台中预期的数据。与我在状态中定义的对象匹配的对象数组。

但是,尝试设置状态时出错。

警告:无法对未装载的调用setstate(或forceupdate) 组件。这是禁止操作,但它表示 申请。若要修复,请取消所有订阅和异步任务 在componentwillunmount方法中。

我肯定我以前做过。但我不知道我为什么会犯这个错误。我试图填充状态的方式是否不正确?

我的想法是在构造函数中设置状态的初始状态,然后在componentwillmount中填充数据。

为什么我会犯错误,我应该如何做到这一点?