React Native: setState in finally()

Question

我在我的"render()“方法中使用以下代码启用/禁用网络活动指示器：

{this.state.networkActivity && <NetworkActivityIndicator/>}

现在当我把

this.setState({networkActivity: true});

在"fetch()“和

this.setState({networkActivity: false});

在".finally()“中，如下所示：

this.setState({networkActivity: true});
fetch(...)
.then(...)
.catch(...)
.finally(this.setState({networkActivity: false}));

指示器根本不显示。知道为什么吗？

将"this.setState({networkActivity: false})“移动到".then()”或".catch()“块可以解决问题(作为解决方法)。指示灯出现。

在装有Android 6的设备上测试。React Native版本: 0.51

Answer 1

因为fetch是一个web标准，所以它使用大多数web浏览器可用的标准Promise API。这意味着"Finally“方法并不存在。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise.all()
Promise.prototype.catch()
Promise.prototype.then()
Promise.race()
Promise.reject()
Promise.resolve()

我相信这些都是可用的方法。您可以创建自己的Finally方法并将其作为Promise.resolve()调用，以完成您的Promise链。

但是，如果该方法可用，则需要在括号内调用函数。

// incorrect -> ...finally(setState...)
// correct -> ...finally(function(){ this.setState() /* this might not be scoped properly here */ })
// correct -> ...finally(()=>this.setState())

Answer 2

与then和catch一样，finally接受一个函数，在您的示例中，您将this.setState()的返回值提供给finally。

两个setState调用都会立即运行。

从本质上讲，您拥有的代码在功能上大致如下：

this.setState({networkActivity: true});
const returnValueOfSetState = this.setState({networkActivity: false});

fetch(...)
.then(...)
.catch(...)
.finally(returnValueOfSetState);

这意味着您将networkActivity设置为true，然后立即将其设置回false。然后当finally发生时，它会尝试执行returnValueOfSetState，我认为它就是undefined，所以这是一个不可行的操作。

这只是一个语法上的错误，你真正想要的是：

this.setState({networkActivity: true});

fetch(...)
.then(...)
.catch(...)
.finally(() => {
  this.setState({networkActivity: false});
});

Answer 3

React Native的fetch中不支持finally。但核心团队计划立即更改fetch polyfill (https://github.com/facebook/react-native/issues/23313)，这可能会修复它。

如果您想要更改StatusBar's network activity，下面是您可以做的。

重写fetch函数，注入网络活动加载器。

const globalFetch = global.fetch;

global.fetch = (url: string, params: Object): Promise<*> => {
  return new Promise((resolve: any => void, reject: string => void) => {
    StatusBar.setNetworkActivityIndicatorVisible(true);

    // TODO: use Promise.finally with RN >= 0.60
    globalFetch(url, params)
      .then((response: any) => {
        resolve(response);
        StatusBar.setNetworkActivityIndicatorVisible(false);
      })
      .catch((error: any) => {
        reject(error);
        StatusBar.setNetworkActivityIndicatorVisible(false);
      });
  });
};