[英]React Native child component not receiving updated props
I'm trying to create a hierarchical menu selection component with 3 levels. 我正在尝试创建具有3个级别的分层菜单选择组件。
The structure is like this: 结构是这样的:
CategoryLv0
CategoryLv0
-->CategoryLv1- > CategoryLv1
---->CategoryLv2----> CategoryLv2
After clicking on a CategoryLv0
node and the initial render of the CategoryLv1
nodes finishes everything is fine. 点击一个后
CategoryLv0
节点和初始渲染的CategoryLv1
节点完成,一切都很好。 The issue I'm having is when I then click on a CategoryLv1
node it should send an updated prop from the parent component down the component chain to trigger componentWillReceiveProps
at the CategoryLv1
level. 我遇到的问题是,当我单击
CategoryLv1
节点时,它应从组件链中的父组件发送更新的prop,以触发CategoryLv1
级别的componentWillReceiveProps
。 This would setState
and render the CategoryLv2
branch from that node. 这将
setState
并呈现CategoryLv2
从该节点分支。 However the componentWillReceiveProps
hook for CategoryLv1
is never called for some reason. 但是,出于某种原因,从未调用
CategoryLv1
的componentWillReceiveProps
挂钩。 The first level ( CategoryLv0
) works as expected and receives updated props allowing me to setState
in it's componentWillReceiveProps
to trigger a rerender. 第一层(
CategoryLv0
)按预期工作,并接收更新的道具,使我可以在componentWillReceiveProps
设置setState
来触发重新渲染。 It seems like the subsequent levels should work as lv0 works but that's not the case. 似乎随后的级别应该像lv0一样起作用,但事实并非如此。
I've included an expo snack so you can see it in action. 我提供了一个博览会小吃,所以您可以在实际中看到它。
EDIT The snack has been updated to remove redundant state in the child components, componentWillReceiveProps and ADD extraData={this.props} to the flatLists Expo Snack of ComponentSelectionComponent 编辑小吃已更新,以删除子组件中的冗余状态,componentWillReceiveProps和将extraData = {this.props}添加到ComponentSelectionComponent的flatLists Expo Snack中
<div data-snack-id="SkcBrXsMG" data-snack-platform="android" data-snack-preview="true" data-snack-theme="dark" style="overflow:hidden;background:#212733;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div> <script async src="https://snack.expo.io/embed.js"></script>
Travis pointed me in the right direction. 特拉维斯(Travis)向我指出了正确的方向。 The answer is that I needed to use the
extraData
prop in the child component's FlatList
. 答案是我需要在子组件的
FlatList
使用extraData
FlatList
。 Without it, it didn't know to rerender. 没有它,它不知道要重新渲染。
So since I am passing a master state of the menu as a prop to the child component, I set extraData={this.props}
to access the state. 因此,由于我将菜单的主状态作为道具传递给子组件,因此我设置了
extraData={this.props}
来访问该状态。 And it works! 而且有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.