Question

我在React的嵌套循环中做错了什么？我在谷歌搜索过信息，但没有找到合适的信息。你能帮我找到，我理解错了吗？

从图中可以看出，我在变量中有数据。它工作正常。但是，当我添加的值不是来自此<tr>时，会出现错误！

    var TableBalls80 = React.createClass({
        render:function(){
            var rows = this.props.rows;
            var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0;
            var td2ndKey = 100;
            return(
                    <table className='table table-bordered bg-success'>
                                <thead>
                                <tr className='danger'>
                                    {rows[0].row.map(function (element){
                                        columnId++;
                                        return (
                                        <th colSpan="2" key={columnId}>{columnId}</th>);
                                    })}
                                </tr>
                                </thead>
                                <tbody>
                                    {rows.map(function (rowElement){
                                        return (<tr key={trKey++}>
                                        {rowElement.row.map(function(ball){
                                            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
                                            return(<div key={divKey++}>
                                                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
                                            </div>);
                                        })}
                                        </tr>);
                                    })}
                                </tbody>
                            </table>);
        }
    });

错误（取决于从另一个<tr>添加的项目）：

未捕获错误：不变违规：findComponentRoot（...，.0.1.1.0.2.0.0.1。$ 0. $ 9. $ 109）：＆gt;无法找到元素。这可能意味着DOM意外地发生了变异（例如，通过＆gt;浏览器），通常是因为在使用表时忘记了一个，n ......`。

Answer 1

所以问题是你正在创建一个像这样的虚拟DOM结构：

<tbody>
   <tr>
      <div>
         <td>...</td>
         <td>...</td>
      </div>
   </tr>
</tbody>

由于<div/>不是<tr>的有效子级，因此浏览器实际上会创建代表此内容的DOM：

<div> </div>
<table>
<tbody>
   <tr>
      <td>...</td>
      <td>...</td>
   </tr>
</tbody>
</table>

^{^fiddle}

当反应进行更新时，它会查看<tr>并想知道<div>去了哪里。相反，它会找到<td>，因此会抛出错误。

Answer 2

当从两个不同的位置（例如来自require和HTML）加载React时，有时也会发生这种情况

Answer 3

请在反应https://github.com/facebook/react/issues/3811中查看此问题，这说明＆＃34;它是一个当前限制，您无法从React渲染方法返回多个组件。＆＃34;所以如果它返回多个元素

，你也应该检查你的渲染

Answer 4

我有类似的问题，原因是我在React.js组件中使用了<form>标记，并将其渲染到已经打开<form>的页面位置。表单不能嵌套。因此，即使组件内的HTML似乎有效，您也可能会收到此错误。

Answer 5

此错误是因为某处存在无效的HTML标记。

在我的情况下，我笨拙地让React在按钮标记内生成一个表单标记，直到出现此错误才会实现。检查您的标记是否存在不允许的嵌套错误。

Answer 6

我遇到了同样的问题，结果发现DOM中的两个元素具有相同的ID（无意中）。

Answer 7

在我的情况下，问题在于按钮的类型。如果您在type="button"中使用<button>，则ReactDOM会丢失。

我删除了type="button"并在我的onClick处理程序上添加了event.preventDefault()，它对我有效。

未捕获错误：不变违规：findComponentRoot（...，... $ 110）：无法找到元素。这可能意味着DOM意外地发生了变异

7 个答案: