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

Question

当我的组件加载时，我调用我的 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 });
    });
}

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

但是，当我尝试设置状态时出现错误。

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

我确定我以前做过这个。但不确定为什么会出现该错误。我尝试填充状态的方式不正确吗？

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

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

Answer 1

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

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

1. 你开始获取
2. 导航并卸载组件(同时请求仍未决)
3. 请求返回并尝试更新不再在 React 树中的组件的状态 - 您持有对“死”组件的引用。

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