时间戳

首页 > 解决方案 > 在 React Native 中延迟 setState

javascript - 在 React Native 中延迟 setState

问题描述

在我的应用程序中，它有一个刷新组件。所以我使用了 react-native-pull-to-refresh组件。在该文档中，它提到_refresh已设置为 2000 延迟。

_refresh: function() {
return new Promise((resolve) => {
  setTimeout(()=>{resolve()}, 2000)
});

但我想在 2000 延迟后重新渲染屏幕。

我想出什么

_refresh(context) {
let promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve()
  }, 2000);
  setTimeout(() => {
     this.updateUI();
     this.setState({ refreshing: true });
 }, 2000);
})

return promise
}

现在当我拉下屏幕时，它不会停留 2 秒（刷新动画不会停留 2 秒）而是立即隐藏并刷新 UI。

问题

我在这里想念什么？如何将刷新动画保持 2 秒，然后调用函数this.updateUI();和this.setState({ refreshing: true });

标签： javascriptreact-native

解决方案

来自 github 中的示例：

_refresh () {
    // you must return Promise everytime
    return new Promise((resolve) => {
      setTimeout(()=>{
        // some refresh process should come here
        this.setState({cards: this.state.cards.concat([this.state.cards.length + 1])})
        resolve(); 
      }, 2000)
    })
  }

看来您可能正在解决诺言，然后尝试做更多……在调用更新函数之前，诺言不应该解决。所以我会尝试这样的事情：

_refresh(context) {
  let promise = new Promise((resolve) => {
    setTimeout(() => {
      this.updateUI();
      this.setState({ refreshing: true });
      resolve()
    }, 2000);
  })
  return promise
}

推荐阅读