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

【问题标题】：Getting array from api call to populate state从 api 调用获取数组以填充状态
【发布时间】：2018-06-02 10:24:29
【问题描述】：

当我的组件加载时，我会调用我的 webApi，它会返回一组客户端。我需要将该数组加载到状态，然后用客户端列表呈现我的屏幕。

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

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 });
    });
}

我说“已收到数据”的日志行显示了我在控制台中所期望的数据。与我在状态中定义的对象匹配的对象数组。

但是，当我尝试 setState 时出现错误。

警告：无法在未安装的设备上调用 setState（或 forceUpdate）零件。这是一个无操作，但它表明您的内存泄漏应用。要修复，请取消所有订阅和异步任务在 componentWillUnmount 方法中。

我确定我以前做过。但我不确定为什么我会收到这个错误。我尝试填充状态的方式是否不正确？

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

为什么会出现错误，我应该如何实现？

【问题讨论】：

似乎您的组件在完成请求之前已被卸载。尝试将console.log 放入componentWillUnmount 看看是否是真的。
顺便说一句。 componentWillMount 已弃用，它在 componentDidMount 中启动 api 调用的赌注
我添加了 componentDidMount 并记录了。只有当我切换到另一条路线时才会调用它。
如果您不切换到另一条路线，您会收到此警告吗？
没有。但是我注意到正在设置状态，就好像我在我的渲染方法中渲染了一个属性......我看到值从状态更新为正确的值。所以状态正在设置......但是，这个错误仍然出现。有时它不会出现，这很奇怪。

标签： javascript reactjs

【解决方案1】：

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

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

你开始抓取
四处导航并卸载组件（此时请求仍处于待处理状态）
请求返回并尝试更新不再在反应树中的组件的状态 - 您持有对“死”组件的引用。

这就是为什么建议让您的组件保持免费的副作用并将您的异步内容移动到其他地方，例如 redux-middleware。

【讨论】：