Reactjs 在动态菜单中使用链接组件时的不变冲突

我正在构建一个菜单组件，它呈现使用react router链接组件创建的链接列表

这是呈现菜单每个项目的代码：

  <li
  style={{opacity: this.props.isDragging ? 0 : 1}}
  className="list">
            <Link to={ this.props.list.url }
                  activeClassName="active"
                  className={ this.props.owner && 'draggable'}>
                <span>{ this.props.list.title }</span>
                { this.props.owner ?
                    <div className="list-controls">
                    <span className="glyphicon
                         glyphicon-pencil"
                        aria-hidden="true"
                    onClick={this.setEditMode.bind(this, true)}>
                    </span>
                    <span className="glyphicon
                         glyphicon-remove"
                    aria-hidden="true"
                    onClick={this.deleteList.bind(this)}></span>
                </div> : null
                }
            </Link>
        </li>;

{this.props.list.title}
{this.props.owner？
：null
}
；

菜单是动态的。这意味着导航到另一个url可能会使用不同的链接列表重新呈现菜单。问题是，当重新呈现菜单时，我会遇到以下异常：

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0.4.$12.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a '<tbody>' when using tables, nesting tags like '<form>, <p>, or <a>', or using non-SVG elements in an <svg>' parent. Try inspecting the child nodes of the element with React ID ``.

Uncaught错误：不变冲突：findComponentRoot（…，.0.0.4.$12.0）：无法找到元素。这可能意味着DOM发生了意外的变化（例如，通过浏览器），通常是因为在使用表时忘记了一个“”，嵌套了像“、或”这样的标记，或者在“父”中使用了非SVG元素。尝试检查具有React ID``的元素的子节点。

我已经检查了.0.0.0.4.$12.0元素是否是链接组件在第一次渲染中生成的

标记。
我还检查了如果我不使用Link组件（例如，使用一个简单的

标记），异常就会消失。有什么想法吗

---

更新：显然，当我开始使用react-router-redux（以前的redux-simple router）时，错误就出现了。

我在一个使用

redux-simple router

（现在的

react-router-redux

）的项目中遇到了同样的问题，并且能够通过更改我用来调度操作的生命周期方法来修复它（我用它来重新加载具有不同

组件的组件）

我创建了一个简化的示例，在其中我开始使用

在要点中有一个

组件，该组件立即发送一个

同步

操作，然后在100ms后发送一个

完成

操作，该操作会更改

渲染（）

以显示加载指示器。加载后，组件将呈现一些条件元素，其中一个是导致相同不变冲突的

最初，我是从页面的

组件WillReceiveProps

生命周期方法中分派操作的。当我将其更改为

componentDidUpdate

时，错误消失了。以下是我更改的相关代码：

- componentWillReceiveProps(nextProps) {
-   if (nextProps.params.param !== this.props.params.param) {
-      nextProps.dispatch(fetch())
-   }
- }

+ componentDidUpdate(prevProps) {
+   if (prevProps.params.param !== this.props.params.param) {
+     this.props.dispatch(fetch())
+   }
+ }

另一方面，我注意到该错误并非仅限于重新提交

组件。我能够在使用

onClick

处理程序的任何元素（如

或

）时重新创建相同的错误