react-navigation 跳转路由,旧页面数据状态问题?
场景:
- 小说详情页面,在componentDidMount时,根据路由参数book_id请求数据接口渲染页面。
- 在小说详情页有一个推荐小说区域,点击通过navigation.navigate(‘Detail’, {book_id: book.book_id})}继续跳转至详情页 通过book_id获取新的小说数据。
问题:
- 重复进入小说详情后,发现返回后的详情页 数据都是一样的了
这种情况要如何解决,在render上打印log后发现跳转了10次详情页后 前面9次也会跟着render,并且重新去根据最新的id请求数据,导致所有的页面都变成一样的了。
1 回复
看了好久才明白。如果是使用内部的 this.state 来管理页面数据的话,应该就不会出现这种情况。 应该是使用了 redux 吧,而且小说的详细页面数据是用对象来存储,每一次打开推荐小说时都把之前的 data 覆盖了。
建议使用栈结构(也就是 [ ]),来储存小说详情页数据,每一次打开推荐小说时,就入栈一个,当前页面显示的是栈顶数据,点击返回时(在 componentWillUnmount 里)出栈一次。