Javascript 从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放入我的

组件willmount

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） 组成部分。这是一个no op，但它表明您的内存中存在内存泄漏 应用若要修复，请取消所有订阅和异步任务 在componentWillUnmount方法中

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

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

---

为什么会出现错误？我应该如何做到这一点？

错误意味着您在某个地方（在承诺回调中）有一个对对象（客户端组件）的引用，该对象已从react树中删除，应该进行垃圾收集。但您仍然保留该引用，使其容易受到内存泄漏的影响

当您导航到另一条路线时，会发生这种情况

你开始抓取

导航并卸载组件（请求仍挂起）

请求返回并尝试更新不再在react树中的组件的状态-您持有对“死”组件的引用

---

这就是为什么建议您保持组件无副作用，并将异步内容移动到其他地方，如redux中间件。

似乎您的组件在完成请求之前已卸载。尝试将

console.log

放在

componentWillUnmount

中，查看是否正确。顺便说一句

componentWillMount

已被弃用，其在

componentDidMount

中启动api调用的赌注已添加componentDidMount并记录。只有当我切换到另一个路由时才会调用它。如果你不切换到另一个路由，你会收到此警告吗？不会。但我注意到正在设置状态，就像我在渲染方法中渲染属性一样。。。我看到该值从状态更新为正确的值。所以国家正在被设定。。。但是，这个错误仍然出现。有时候它没有出现，这很奇怪。