react native routerflux 遇到两个key相同的child

Posted

技术标签:

【中文标题】react native routerflux 遇到两个key相同的child【英文标题】:react native router flux Encountered two children with the same key 【发布时间】:2016-12-14 08:52:27 【问题描述】:

版本

react-native-router-flux v3.31.2 react-native v15.2.1

我不知道我做错了什么,但是当我尝试多次调用Actions.dialog() 时,我收到了这个错误。

我认为这个修复 https://github.com/aksonov/react-native-router-flux/issues/327 修复了它,但它不是,它应该是别的东西,但我没有想法......

我没有这个的唯一一次是当我使用 pop() 来关闭它的时候。不幸的是,我不想弹出(它可能会破坏我应用中的其他功能)。

有人可以帮忙吗?

错误:

`1:$dialog_1_dialog`. Child keys must be unique; when two children share a key, only the first child will be used.
    in RCTView (created by View)
    in View (created by Modal)
    in Modal (created by DefaultRenderer)
    in RCTView (created by View)
    in View (created by DefaultRenderer)
    in DefaultRenderer (created by SceneView)
    in SceneView (created by NavigationCard)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent (created by NavigationCard)
    in NavigationCard (created by Container)
    in Container (created by NavigationComponent)
    in NavigationComponent (created by NavigationAnimatedView)
    in RCTView (created by View)
    in View (created by NavigationAnimatedView)
    in RCTView (created by View)
    in View (created by NavigationAnimatedView)
    in NavigationAnimatedView (created by NavigationComponent)
    in NavigationComponent (created by DefaultRenderer)
    in DefaultRenderer (created by NavigationRootContainer)
    in NavigationRootContainer (created by Router)
    in Router (created by Connect(Router))
    in Connect(Router) (created by CdiscountReact)
    in Provider (created by CdiscountReact)
    in CdiscountReact
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
2016-08-08 14:23:04.269 [warn][tid:com.facebook.react.javascript] Warning: flattenChildren(...): Encountered two children with the same key, `1:$dialog_2_dialog`. Child keys must be unique; when two children share a key, only the first child will be used.
    in RCTView (created by View)
    in View (created by Modal)
    in Modal (created by DefaultRenderer)
    in RCTView (created by View)
    in View (created by DefaultRenderer)
    in DefaultRenderer (created by SceneView)
    in SceneView (created by NavigationCard)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent (created by NavigationCard)
    in NavigationCard (created by Container)
    in Container (created by NavigationComponent)
    in NavigationComponent (created by NavigationAnimatedView)
    in RCTView (created by View)
    in View (created by NavigationAnimatedView)
    in RCTView (created by View)
    in View (created by NavigationAnimatedView)
    in NavigationAnimatedView (created by NavigationComponent)
    in NavigationComponent (created by DefaultRenderer)
    in DefaultRenderer (created by NavigationRootContainer)
    in NavigationRootContainer (created by Router)
    in Router (created by Connect(Router))
    in Connect(Router) (created by CdiscountReact)
    in Provider (created by CdiscountReact)
    in CdiscountReact
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

代码

<Scene key="modal" component=Modal >
  <Scene key="root">
    <Scene key="launch" initial=true component=Launch />
    ...
  </Scene>

  /*Modals*/
  ...
  <Modal key="dialog" component=Dialog direction="vertical"/>
</Scene>

【问题讨论】:

我终于找到了一个 hack / 解决方案:github.com/aksonov/react-native-router-flux/issues/… 【参考方案1】:

希望能提供帮助:

<Modal key="dialog" clone component=Dialog direction="vertical"/>

【讨论】:

以上是关于react native routerflux 遇到两个key相同的child的主要内容,如果未能解决你的问题,请参考以下文章

无法与 lrettig 的 react-native-stripe 模块链接

航遇项目react踩坑

create-react-app项目所遇问题总结之antd引入和样式不生效问题解决

react-native init 指定 react 版本和 react-native 版本

React 学习记录

添加 React-Native-Camera 和 React-Native-Push-Notification 后无法构建 React Native