Question

我们第一次在componentDidMount中获取数据。

然后过了一段时间（甚至几天），如果用户只是退出了应用程序，我发现组件正在使用它获取的数据，尽管服务器现在有更多数据要提供。

为用户重新获取数据的常用策略是什么？

Answer 1

这取决于您的目标和数据。如果该数据经常更新，或者让用户刷新也许是有意义的。我通常会使用以下三种方法之一：

react-native-navigation可让您定义屏幕焦点上发生的事情：

this.willFocusSubscription = this.props.navigation.addListener(
    "willFocus",
    payload => {
        this.fetchData()
    }
)

这将在用户每次返回（或进入）屏幕时触发。

FlatList和onRefresh：

<FlatList
    data={this.state.data}
    onRefresh={() => {
        this.onRefresh()
    }}
    refreshing={this.state.refreshing}
/>

componentDidMount。

Answer 2

您应该使用AppState https://facebook.github.io/react-native/docs/appstate

当AppState从其他状态更改为active时，您可以获取新数据。

import React, {Component} from 'react';
import {AppState, Text} from 'react-native';

class AppStateExample extends Component {
  state = {
    appState: AppState.currentState,
  };

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      console.log('App has come to the foreground! Fetch new data?!');
    }
    this.setState({appState: nextAppState});
  };

  render() {
    return <Text>Current state is: {this.state.appState}</Text>;
  }
}

React native我们何时应该重新获取数据？

2 个答案: