listview - 使用API​​和AsyncStorage数据构建ListView

要构建我的本机ListView，我需要从网络APi和AsyncStorage（例如AppCache）的两个位置提取数据。来自AsyncStorage的数据可能存在或可能不存在，但是无论哪种方式它都需要返回某些内容（例如“未找到”）

这是当前版本的要点，除了检索cachedOn日期（Line 47）之外，其他功能均有效
https://gist.github.com/geirman/1901d4b1bfad42ec6d65#file-aircraftlist-js-L47，我相信这就是秘诀所在。

我认为这可能是任何ReactJS开发人员可能会回答的问题，尽管示例是特定于React Native的。

最佳答案

这个问题似乎很复杂，因为在运行中存在多个异步级别：获取数据，读取/写入缓存以及呈现列表行。在这种情况下，将问题分解为更小的组件通常会有所帮助。

我无法轻松地运行示例代码，因此我使用的是简化示例。

首先，让我们将缓存包装到一个整洁的接口中，因此在使用它时，我们无需考虑AsyncStorage语义：

const aircraftCache = {
  // returns promise of cached aircraft, or null if not found
  getAircraft(aircraftId) {
    return AsyncStorage.getItem(aircraftId).then(data => (
      data ? JSON.parse(data) : null
    ));
  },

  // caches given aircraft object with a fresh cachedOn date
  // and returns a promise of the cached aircraft
  setAircraft(aircraftId, aircraft) {
    const cached = {...aircraft, cachedOn: new Date()};
    return AsyncStorage.setItem(aircraftId, JSON.stringify(cached)).then(() => cached);
  },

  // clears given aircraft from cache and return Promise<null>
  clearAircraft(aircraftId) {
    return AsyncStorage.removeItem(aircraftId).then(() => null);
  }
}

然后，让我们将AircraftList责任限制为仅显示数据列表，加载指示符等，并将行渲染提取到单独的组件中：

class AircraftList extends Component {
  static propTypes = {
    aircraft_list: PropTypes.arrayOf(PropTypes.shape({
      reg_number: PropTypes.string,
      ti_count: PropTypes.number
    }))
  }

  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: this.ds.cloneWithRows(this.props.aircraft_list),
      isLoading: false,
      showingCache: false
    };
  }

  aircraftLoaded(aircraft) {
    this.setState({isLoading: false});
    this.props.navigator.push({
      title: 'TI Lookup',
      component: TrackedItemIndex,
      passProps: {aircraft_object: aircraft}
    });
  }

  renderRow(aircraft) {
    return (
      <AircraftRow
        reg_number={aircraft.reg_number}
        ti_count={aircraft.ti_count}
        loading={() => this.setState({isLoading: true})}
        loaded={this.aircraftLoaded.bind(this)}
      />
    );
  }

  render() {
    // simplified view
    return(
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
      />
    );
  }
}

然后可以将各个行的呈现，获取和缓存操作封装到AircraftRow组件中：

class AircraftRow extends Component {
  static propTypes = {
    reg_number: PropTypes.string,
    ti_count: PropTypes.number,
    loading: PropTypes.func,
    loaded: PropTypes.func
  }

  state = { cachedOn: null };

  constructor(props) {
    super(props);

    this.loadDetails = this.loadDetails.bind(this);
    this.clearDetails = this.clearDetails.bind(this);
    this.setCachedOn = this.setCachedOn.bind(this);
  }

  componentWillMount() {
    // when component is loaded, look up the cached details and
    // set the cachedOn timestamp into state
    aircraftCache.getAircraft(this.props.reg_number).then(this.setCachedOn);
  }

  loadDetails() {
    const id = this.props.reg_number;
    // notify parent that loading has started
    if (this.props.loading) {
      this.props.loading(id);
    }

    // fetch and cache the data
    this.fetchDetails(id)
      .then((aircraft) => {
        // notify parent that loading has finished
        if (this.props.loaded) {
          this.props.loaded(aircraft);
        }
      })
      .catch((e) => {
        console.error(e);
      });
  }

  fetchDetails(id) {
    // get details from the api, and fall back to the cached copy
    return Api.getTrackedItems(id)
      .then(aircraft => aircraftCache.setAircraft(id, aircraft))
      .then(this.setCachedOn)
      .catch(() => aircraftCache.getAircraft(id));
  }

  clearDetails() {
    // clear item from cache and update local state with null aircraft
    const id = this.props.reg_number;
    aircraftCache.clearAircraft(id).then(this.setCachedOn);
  }

  setCachedOn(aircraft) {
    // update local state (aircraft can be null)
    this.setState({ cachedOn: aircraft ? aircraft.cachedOn.toString() : null })
    return aircraft;
  }

  render() {
    // simplified view
    return (
      <View>
        <Text>{this.props.reg_number}</Text>
        <Text>{this.props.ti_count}</Text>
        <Text>{this.state.cachedOn}</Text>
        <Text onPress={this.loadDetails}>Load details</Text>
        <Text onPress={this.clearDetails}>Clear details</Text>
      </View>
    )
  }
}

对于我来说，这种观点仍然做得太多。我建议您研究诸如Redux或MobX之类的状态管理库，以进一步简化代码-尽管它们当然具有自己的复杂性。