我的api不向我提供要通过页面获取的页面。在这种情况下,我也使用redux,目前将结果分成10行,并使用平面列表仅显示10个结果。
我打算对redux进行的操作是,在onEndReached的末尾调用action函数将LOAD_MORE传递给reducer并与当前状态下的另外10条记录合并,然后再次传递回我的组件。
但是我不确定在onEndReached上应该怎么做
这是我的零件
render() {
if (this.props.loading) {
return (
<View style={styles.activityIndicatorContainer}>
<ActivityIndicator animating={true}/>
</View>
);
} else {
return (
<Container style={{flex: 1}}>
<Content>
<FlatList
ref='listRef'
data={this.props.currData}
renderItem={this.renderItem}
keyExtractor={(item, index) => item.sno+item.name+item.cid}
onEndReached={this.handleMore}
onEndReachedThreshold={0}
/>
</Content>
</Container>
);
}
}
handleMore = () => {
this.props.loadMore();
};
// The function takes data from the app current state,
// and insert/links it into the props of our component.
// This function makes Redux know that this component needs to be passed a piece of the state
function mapStateToProps(state, props) {
return {
loading: state.dataReducer.loading,
data: state.dataReducer.data,
currData: state.dataReducer.currViewData
}
}
// Doing this merges our actions into the component’s props,
// while wrapping them in dispatch() so that they immediately dispatch an Action.
// Just by doing this, we will have access to the actions defined in out actions file (action/home.js)
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
}
动作
export function loadMore(){
return (dispatch) => {
console.log("load more");
//dispatch({type: LOAD_MORE, data: test});
};
}
这是一个简单的测试,以查看滚动到底部时是否可以在控制台日志中达到更多负载。看来我无法击中它。可能如何设置这样的东西?
我的结果返回包含大量数据,我更喜欢一次加载10个并向下滚动10个,我唯一的问题是我的api没有页面来支持通常的无限滚动