React js：Invariant Violation：processUpdates()在呈现具有不同数量子行的表格时

10 浏览
0 Comments

React js：Invariant Violation：processUpdates()在呈现具有不同数量子行的表格时

当我的React组件在点击事件之后重新渲染时，我遇到了以下错误：

Uncaught Error: 不变性违规：processUpdates()：无法找到元素的子2。这可能意味着DOM意外变异...

只有当我的表格的行数与之前渲染版本不同时才会出现这个问题。例如：

/** @jsx React.DOM */
React = require('react');
var _ = require("underscore");
var testComp = React.createClass({
  getInitialState: function () {
    return { 
      collapsed: false
    };
  },
  handleCollapseClick: function(){
    this.setState({collapsed: !this.state.collapsed});
  },
  render: function() {
    var rows = [
      Header 1Header 2Header 3
    ];
    if(!this.state.collapsed){
      rows.push(Row1 1Row1 2Row1 3);
    }
    rows.push(Footer 1Footer 2Footer 3);
    return  
                
                    {rows}
                

  }
});
module.exports = testComp

如果我渲染不同的内容，但行数相同，我就不会遇到这个错误，所以如果我将if语句更新为：

if(!this.state.collapsed){
  rows.push(Row1 1Row1 2Row1 3);
}else{
  rows.push(Row2 1Row2 2Row2 3);
}

...一切正常。

在这种情况下，我需要强制React重新渲染整个组件，而不仅仅是'changed'元素吗？

0

3 答案

0 Comments

React js: Invariant Violation: processUpdates() when rendering a table with a different number of child rows

在使用react-templates的人们注意：

您需要在.jsx文件中生成<tbody>标签。如果您只在.rt文件中添加它，仍然会收到错误消息。

this.tbody = <tbody>{tablerows}</tbody> // - in .jsx

问题原因：

在使用react-templates时，如果只在.rt文件中添加

标签，而未在.jsx文件中生成

标签，就会导致出现此错误。

解决方法：

在.jsx文件中生成

标签，并将其包裹在this.tbody = 中。这样可以确保在渲染表格时，正确地生成包含不同子行的

标签。

示例代码：

this.tbody = {tablerows} // - in .jsx

通过按照上述解决方法，您可以成功解决React js中的"Invariant Violation: processUpdates() when rendering a table with a different number of child rows"问题。

0
0 Comments

在处理p标签时，我遇到了这个问题。我在段落内嵌套了段落。

为了解决这个问题，我将包裹的p元素替换为div元素。

之前的代码:

render: function render() {
    return (
        <p>
            <p>1</p>
            <p>2</p>
        </p>
    );
}

修改后的代码:

render: function render() {
    return (
        <div>
            <p>1</p>
            <p>2</p>
        </div>
    );
}

啊，这看起来就像我遇到的问题...但是没有看到周围的代码，你的示例没有太多意义。

哦，对不起！这些标签应该由React组件中的render函数输出。我更新了我的答案以更准确。

你不能在p标签内部再放置p标签，因为这是非法的。浏览器会"修复"它。

0
0 Comments

在使用React渲染表格时，出现了"React js: Invariant Violation: processUpdates() when rendering a table with a different number of child rows"的错误。错误提示说无法找到第2个子元素，这可能意味着DOM被意外地改变了，通常是由于在使用表格时忘记添加

标签，或者嵌套了<form>、<p>或<a>等标签，或者在父元素中使用了非SVG元素。

解决方法是每个表格都需要一个

元素。如果没有

元素，浏览器会自动添加它。然而，如果DOM从外部被操作，React将无法工作。

这个问题还与Removing row from table results in TypeError相关。

在React首次渲染时没有

元素，然后浏览器会插入它。在重新渲染时，React想要渲染的内容与DOM中的内容不一致，因此会出现错误。这个错误在我使用React的第二天出现了，谢谢你的帮助。

是的，特别是Chrome会自动关闭标签，删除非法嵌套在其他

标签中的

标签，还有各种可能让你感到困惑的事情。

0