React Native分页和React Navigation问题

huangapple go评论79阅读模式
英文:

React Native Pagination and React Navigation Problem

问题

我面临一个复杂的问题,与分页和React Native导航有关。抽屉上有类别列表,点击它们都会进入屏幕。

问题描述:

当我随机点击类别时,一切正常。但在分页过程中出现问题。假设我点击"Consumer"类别,然后滚动获取更多记录。然后我点击"Mobile"类别。"Mobile"类别页面会显示一秒钟,然后跳回之前的路由("Consumer")。

我尝试了以下代码来导航到类别,但仍然遇到相同的问题。

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);

请注意,这是关于解决React Native导航问题的代码片段,问题可能需要更多上下文来解决。

英文:

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.

<!-- language: lang-js -->

Code:

1).

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

2).

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

3).

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

答案1

得分: 1

在类别列表页面上显示旧项目,因为我们在 Redux 存储中有旧记录,所以我们需要自己为第一次分配一个空数组。因此,当我们的页面被调用时,我们通过自己分配一个空数组。

componentWillMount = () => {
    this.props.categoryListRecord.categoryList = []
}
mapStateToProps = (state) => {
    categoryListRecord: state.categoryListReducer
}

然后,我们可以分派我们的动作并获取新的记录,并在我们的组件中使用它。解决这个错误。

英文:

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 = () =&gt; {
this.props.categoryListRecord.categoryList = []
}

mapStateToProps = (state) =&gt; { ....
categoryListRecord : state.categoryListReducer

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

huangapple
  • 本文由 发表于 2020年1月6日 14:51:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/59607840.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定