React：不变违规（无表格）

Question

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

我使用react-google-maps 库中的ScriptjsLoader 渲染这个<GISMapDropdownMenu> 组件。

    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) 卸载组件：

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

More details on this type of error

2) 标记中的 HTML 标记不完整

例如，添加一个<p> 标记，而没有结束</p>。浏览器喜欢所有的 html 标签都是完整的，所以如果它没有看到某个东西的结束标签，它会添加它。尝试获取生成的组件的 HTML 并将其与您的期望进行比较。还要逐位删除子组件（例如 remove ）以查看它何时开始工作，以便了解导致此问题的原因。我所看到的您的 html 不会导致这种情况。

3) 在渲染之前构建您的子组件

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

4) 使用 React 以外的方式更改 DOM

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

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