这个问题看起来相当复杂，因为有多个级别的异步在起作用：获取数据、读/写缓存和渲染列表行。在这种情况下，将问题分解为更小的组件通常会有所帮助。
我无法轻松运行示例代码，因此我使用了一个简化的示例。
首先，让我们将缓存包装成一个简洁的接口，这样我们在使用它时就不需要考虑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 之类的状态管理库来进一步简化代码——当然，它们也有自己的一套复杂性。