React Native：finally() 中的 setState

Question

我 enable/disable 网络 activity 指标在我的 "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 是一种网络标准，因此它使用大多数网络浏览器可用的标准 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

finally，就像 then 和 catch 接受一个函数，在您的示例中，您将 this.setState() 的 return 值提供给 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

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

如果您想更改 StatusBar's network activity，您可以按照以下步骤操作。

覆盖 fetch 函数，以注入网络 activity 加载程序。

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

React Native：finally() 中的 setState

React Native: setState in finally()

android

ecmascript-6

react-native

fetch-api