1

当我的组件加载时，我调用我的 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中填充我的数据。

为什么我会收到错误，我应该如何实现这一点？

4

1 回答 1

2

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

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

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

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

于 2018-06-02T10:40:56.713 回答