javascript - React Native 子组件未接收更新的 props

Question

我正在尝试创建一个具有 3 级的分层菜单选择组件。

结构是这样的:

CategoryLv0
-->CategoryLv1
---->CategoryLv2

点击CategoryLv0后节点和 CategoryLv1 的初始渲染节点完成一切都很好。我遇到的问题是当我单击 CategoryLv1 时它应该从父组件沿着组件链发送更新的 prop 以触发 componentWillReceiveProps在CategoryLv1等级。这将 setState并渲染CategoryLv2从该节点分支。然而componentWillReceiveProps Hook CategoryLv1由于某种原因从未被调用过。第一级( CategoryLv0 )按预期工作并接收更新的 Prop ，使我能够 setState在它的componentWillReceiveProps触发重新渲染。似乎后续级别应该像 lv0 一样工作，但事实并非如此。

我提供了一份博览会小吃，以便您可以看到它的实际效果。

编辑该零食已更新，以删除子组件中的冗余状态，componentWillReceiveProps 并将 extraData={this.props} 添加到 flatLists Expo Snack of ComponentSelectionComponent

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

Answer 1

特拉维斯为我指明了正确的方向。答案是我需要在子组件的 FlatList 中使用 extraData 属性。没有它，它就不知道重新渲染。

因此，由于我将菜单的主状态作为 Prop 传递给子组件，因此我设置了 extraData={this.props} 来访问该状态。而且它有效!