React Native 子组件没有收到更新的道具答案

【问题标题】：React Native child component not receiving updated propsReact Native 子组件没有收到更新的道具
【发布时间】：2018-06-03 12:47:41
【问题描述】：

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

结构是这样的：

类别Lv0
-->CategoryLv1
---->CategoryLv2

单击CategoryLv0 节点并完成CategoryLv1 节点的初始渲染后，一切都很好。我遇到的问题是，当我然后单击CategoryLv1 节点时，它应该从父组件向组件链发送更新的道具，以在CategoryLv1 级别触发componentWillReceiveProps。这将setState 并从该节点呈现CategoryLv2 分支。但是，由于某种原因，从未调用过 CategoryLv1 的 componentWillReceiveProps 钩子。第一级（CategoryLv0）按预期工作并接收更新的道具，允许我在componentWillReceiveProps 中使用setState 来触发重新渲染。似乎后续级别应该像 lv0 一样工作，但事实并非如此。

我已经包含了一个世博小吃，所以你可以看到它的实际效果。

编辑零食已更新以删除子组件 componentWillReceiveProps 和 ADD 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>

【问题讨论】：

看代码，我觉得如果你简化一些事情可能更容易追踪/理解。首先，您似乎正在复制道具以在所有类别类中声明。为什么不直接访问道具？将值置于状态是不必要的。此外，一旦您消除了冗余状态问题，您就可以将所有类别* 变成纯组件。然后检查主状态是否正确更新。另外，查看FlatList 的extraData 道具。
您好，感谢您的帮助！是的，实际上我之前并没有在类别类中执行所有 setState，这是同一个问题。类别类也已经是 PureComponents。但是是的，我已经删除了多余的 setState 并更新了 Snack。根据父组件渲染处的 console.log，我可以看到状态设置正确，只是没有正确传播。请看一看！我现在会读取额外的数据。
extraData 是问题！谢谢一堆。在CategoryLv0 中我只需在FlatList 中设置extraData={this.props} 我将再次更新小吃以便人们可以看到

标签： javascript react-native

【解决方案1】：

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

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

【讨论】：