React Native Pagination and React Navigation Problem

Question

I am facing a complex type of problem due to pagination and React Native Navigation. Drawer having the categories list on click they are all going to the screen

Problem Statement:

When I click randomly on categories every thing is working fine. But, getting the problem during pagination. Suppose I click on category Consumer and scroll for more records. After that I click on Mobile category. Mobile Category Page will be shown for a second and after that previous route is called (Consumer).

I tried with the following code to navigate the category but getting the same problem.

Code:

1).

this.props.navigation.navigate({
  routeName: "CategoryList",
  params: {
    cat_id: e.cat_id
  },
  key: Math.random () * 10000
})

2).

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({
    routeName: 'CategoryList',
    params: {
      cat_id: e.cat_id
    }
  })],
});
this.props.navigation.dispatch(resetAction);

3).

const pushAction = StackActions.push({
  routeName: "CategoryList",
  params: {
    cat_id: e.cat_id
  }
});
this.props.navigation.dispatch(pushAction);

Answer 1

In categoryList page shows old items because of we have old records in our redux store so we need to assign empty array for first time by our self.So, when our page is called we are assigning empty array by our self.

componentWillMount = () => {
this.props.categoryListRecord.categoryList = []
}

mapStateToProps = (state) => { ....
categoryListRecord : state.categoryListReducer

then we can dispatch our action and get new records and use it in our component.Solve this error