反应：不变违规（不含表格）

Question

我在stackoveflow中看了一些答案。但是他们中的大多数都有<table>和<tbody>的东西。但我的问题与此无关。

我使用react-google-maps库的<GISMapDropdownMenu>呈现此ScriptjsLoader组件。

    initialCustomSetup: function() {
    let GISMapDropdownMenu = this.refs.cornermenu;
        if (googleMapInstance.props.map.controls[google.maps.ControlPosition.TOP_LEFT].j.length === 0) {// push only once
          googleMapInstance.props.map.controls[google.maps.ControlPosition.TOP_LEFT].push(GISMapDropdownMenu);
          GISMapDropdownMenu.style.zIndex = 1;
          GISMapDropdownMenu.style.display = 'inline-block';
      }
    },
    render: function() {
      return(
        <ScriptjsLoader

         **** some setup ****               
          googleMapElement={
            <GoogleMap
              ref={googleMap => {
                if (googleMap) {
                  googleMapInstance = googleMap;
                  layerType = self.props.layerType;
                  self.initialCustomSetup();
                }
                return;
              }} >
               <GISMapDropdownMenu
                ref="cornermenu"
                availableDesa={self.props.availableDesa}
                availableDesaColor={self.props.availableDesaColor} />
               {self.props.children}
            </GoogleMap>
          }
        />);

以下是GISMapDropdownMenu的实施。

<div className="gmnoprint GISMap-dropdownmenu" style={{display: 'none'}}>
  <div>
    <div ref="icon" className="GISMap-dropdownmenu--icon" onClick={this.handleIconClick}>
      <img src={BurgerIcon} draggable="false" />
    </div>
    <div ref="content" className="GISMap-dropdownmenu--content" style={{display: 'none'}}>
      <div className="GISMap-dropdownmenu--content_header">
        <div className="GISMap-dropdownmenu--content_header__title">List of Desa ({number_of_desa})</div>
        <div className="GISMap-dropdownmenu--content_header__cross" onClick={this.handleCrossCLick}>
          <img src={CrossIcon} draggable="false" />
        </div>
      </div>
      <div className='GISMap-dropdownmenu--content_list'>
        {array_div_element_inrange_assigned_desa}
        {array_div_element_inrange_desa}
        {array_div_element_assigned_desa}
      </div>
    </div>
  </div>
</div>

{array_div_element_something}就是这个数组。

<div key={"desa_name-"+desa.desa_name} className={"GISMap-dropdownmenu--content_list__"+desa_color.status}>Desa {desa.desa_name}</div>;

使用<GISMapDropdownMenu />组件时出现此错误。

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 97 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser),

我意识到了什么：
我在安装后移动了<GISMapDropdownMenu />组件的DOM。因为我需要它在谷歌地图的左上角。

有什么建议吗？

Answer 1

潜在的问题：首先，这些都是猜测，因为我不会一直做React，但话虽如此，这里有一些可能的原因：

1）卸载组件：

这可能意味着在最初启动请求的组件已从dom卸载后触发的回调中调用了setState。

More details on this type of error

2）标记中包含不完整的HTML标记

例如，添加<p>代码而不关闭</p>。浏览器喜欢所有html标签都是完整的，所以如果它没有看到某个结束标记，它就会添加它。尝试获取生成的组件的HTML并将其与您期望的进行比较。同时删除子组件（例如删除）以查看它何时开始工作，以便您知道导致此问题的原因。你从我能看到的HTML中没有引起这个。

3）在渲染之前构建子组件

也许你需要to do as this similar answer does

4）使用React

之外的其他内容更改DOM

您的网页是否使用jquery或其他东西来改变这个组件？即绑定事件或添加/删除任何东西？如果是这样，这也可能导致这种情况。尝试禁用此功能，看看它是否解决了问题

如果以上都没有帮助，我建议添加一个JSFiddle，以便人们可以确定问题是肯定的。