未捕获的错误：不变违规错误答案

【问题标题】：Uncaught Error: Invariant Violation Error未捕获的错误：不变违规错误
【发布时间】：2015-06-09 16:43:51
【问题描述】：

我正在尝试使用 React 显示一个简单的数据表。我得到了错误

“未捕获的错误：不变违规：processUpdates()：无法找到元素的子 1。这可能意味着 DOM 被意外突变（例如，被浏览器），通常是由于在使用表格时忘记了 a，嵌套标签如,

，或，或在父级中使用非 SVG 元素。尝试检查具有 React ID .0.1.0 的元素的子节点。"

不知道为什么会这样

这里是代码

 render: function() {

      self = this;


      // render each campaign row
      var campaigns = this.state.campaigns.map(function(p){
        return <CampaignItem key={p.id} campaignName={p.campaign_name} />
      });

      console.log(campaigns)


      // if nothing is loaded
      if(!campaigns.length){
          campaigns = <p>Loading campaigns..</p>;
      }
      return (
        <div>
          <h2>Campaigns</h2>
          <div className="table-responsive">
            <table className="table table-bordered table-striped">
              <thead>
                <th>
                  <tr>
                    <th>
                    Campaign Name
                    </th>
                  </tr>
                </th>
              </thead>

              <tbody>
                {campaigns}
              </tbody>

            </table>
          </div>
        </div>

      );
  }
});


var CampaignItem = React.createClass({


  render: function() {
    return (
      <tr>
        <td>{this.props.campaignName}
        </td>

      </tr>
    );
  }

});

【问题讨论】：

您是否尝试将空状态 (!campaigns.length) 值包装在 tr 和 td 中？ tbody 不应直接包含 p。
如果没有广告系列，您会在 tbody 内呈现 p 标记，这可能会导致此错误：stackoverflow.com/questions/25026399/… - 您在 @ 之外还有一些 th 标记987654332@<th> <tr> <th> Campaign Name </th> </tr> </th>
我删除了两个额外的 th 标签并将p 更改为<tr><th>，一切似乎都很好

标签： reactjs

【解决方案1】：

我删除了两个额外的 th 标签并将 p 更改为 a，一切似乎都很好

【讨论】：