Question

我正在渲染一个购物车＆＃39;组件进入页面的顶级导航元素，如下所示。

<li class='nav-borders-left cart-dropdown dropdownable'>
  <%= link_to image_tag('Icon-Cart.png'), '#', 'aria-haspopop' => 'true', 'aria-expanded' => 'false' %>
  <ul class="cart-content popover">
    <li>
      <%= react_component 'Cart', { data: { currentUserId: current_user.id } } %>
    </li>
  </ul>
</li>

然后在购物车组件内部，我有一个典型的Item个对象数组，每个对象都被渲染到它们自己的组件中，如下所述，

@Cart = React.createClass

  displayCart: ->
    React.DOM.div
      className: null
      className: 'data'
      React.DOM.div
        className: 'cart'
        React.DOM.div
          className: 'heading'
          React.DOM.div
            className: null
            React.DOM.img
              className: 'small-icon'
              src: '/assets/Icon-Cart.png'
            React.DOM.span
              className: null
              'Shopping Cart'
      for item, index in @state.items 
        uniqueKey = "#{item.productId}#{index}"
        React.createElement Item, key: uniqueKey, item: item, product: item.product

我为Item对象提供了一个独特的密钥，该密钥在验证后是唯一的。

我用一些相当令人讨厌的代码实例化实际的popover，因为我需要对动作进行非常精确的控制，我通过标准的java（coffee）脚本对象控制，如下所示，

class CartInterface
  constructor: () ->
    @content = '.cart-content'
    @popover = '.cart-dropdown'
    @initCartDisplay()
    @showCart()
    @hideCart()

  initCartDisplay: () ->
    $(@popover).popover(
      html: true
      placement: 'bottom'
      trigger: 'manual' 
      content: () ->
        $(@).children('.cart-content').html()
      )

  showCart: () ->
    $(@popover).click (e) =>
      popoverIsHidden = $('.popover').is(':visible') == false
      if popoverIsHidden
        $(@popover).popover('show')

  hideCart: () ->
    $('body').click (e) =>
      clickOutsideContent = $(e.target).parents('.popover-content').length == 0
      cartDropDownParents = $(e.target).parents('.cart-dropdown')
      notShowClick = cartDropDownParents.length == 0
      popoverIsShown = $('.popover').is(':visible')
      if notShowClick && clickOutsideContent && popoverIsShown
        $(@popover).popover('hide')

new CartInterface

除了CartInterface对象的任何问题外，一般模式是顶级导航元素呈现图标，单击该图标时，如果弹出窗口不是当前显示，则显示它然后一旦弹出窗口显示，如果用户单击弹出窗口外的任何位置，请关闭弹出窗口。

我的问题是，在呈现Item个对象时，请注意，鼠标悬停的任何一点都是＆＃39; chrome元素（不在页面加载时），chrome咳出一系列看起来（和气味）的错误，

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0.0
Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0.0
Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0.0.0
2react-a1e4ef4f52c95eebf22e958a0fe4af2c.js?body=1:20303 Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0.0.0.1

我一般认为，当React做出事情时弹片的内容可能没有准确地反映在真实的DOM中，然后当弹出窗口被渲染时，可能会遇到麻烦新的或者它可能认为是什么＆＃39;额外的＆＃39; dom节点。

我可能会提到，Cart组件基本上是使用空.items状态实例化的，即[]和componentDidMount，I＆＃39; m调用服务器获取当前用户的相关项，然后更新状态，这应该触发重新渲染。

在理解如何获得与此错误原因相关的更多上下文或仅仅是一般故障排除帮助的任何帮助将不胜感激。我有新的反应，＆lt; 3周，但它是一个很好的工具，我很欣赏，虽然我使用它可能会有问题。

谢谢，

JD

为什么在Bootstrap Popover中呈现React组件列表导致＆＃39; Invariant Violation＆＃39;？

0 个答案: