javascript - react - Error no detectado: infracción invariable: findComponentRoot(...,... $ 110): no se puede encontrar el elemento. Esto probablemente significa que el DOM se mutó inesperadamente

react js init

Question

¿Qué estoy haciendo mal con los ciclos anidados en React? He buscado información en Google y no encontré nada adecuado. ¿Puedes ayudarme a encontrar lo que entiendo mal?

Como se puede ver en la figura, tengo datos en una variable. Y funciona bien Pero cuando estoy agregando un valor que no proviene de este <tr> , ¡aparece el error!

 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>);
}
});

Error (depende de qué elemento se agrega desde otro <tr> ):

Error no detectado: Violación invariable: findComponentRoot (..., .0.1.1.0.2.0.0.1. $ 0. $ 9. $ 109):> No se puede encontrar el elemento. Esto probablemente significa que el DOM se mutó inesperadamente (por ejemplo, por el navegador), generalmente debido a que se olvida una al usar tablas, n ...... `.

Answer 1

Consulte también este problema en https://github.com/facebook/react/issues/3811 , donde dice "es una limitación actual que no puede devolver más de un componente de un método de representación React". también debe verificar su procesamiento si devuelve múltiples elementos

Answer 2

En mi caso, el problema fue con el tipo de botón. ReactDOM se pierde si utiliza un type="button" en un <button> .

event.preventDefault() el type="button" y agregué un event.preventDefault() en mi controlador onClick y funcionó para mí.

Answer 3

Entonces, el problema es que estás creando una estructura DOM virtual como esta:

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

Como <div/> no es un elemento secundario válido de <tr> el navegador realmente crea DOM que representa esto:

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

^fiddle

Cuando reacciona va a actualizar, está viendo ese <tr> y se pregunta dónde fue el <div> . En cambio, encuentra un <td> por lo que arroja un error.

Answer 4

Este error se debe a que en alguna parte hay un marcado HTML que no es válido.

En mi caso, tuve torpemente React generando una etiqueta de formulario dentro de una etiqueta de botón y nunca me di cuenta hasta que este error comenzó a aparecer. Verifique su marcado para detectar errores de anidamiento que no están permitidos.

Answer 5

Recibí el error mencionado anteriormente tratando de hacer esto para una prueba:

component = React.addons.TestUtils.renderIntoDocument(<MyTableRow />)
React.findDOMNode(component)

Mi solución fue envolverlo antes de la representación:

component = React.addons.TestUtils.renderIntoDocument(<table><MyTableRow /></table>)
table = React.findDOMNode(component)
row = jQuery(table).find("tr")[0]

Answer 6

Tuve este mismo problema y resultó ser dos elementos en el DOM con el mismo ID (inadvertidamente).

Answer 7

Tuve un problema similar y la razón fue que estaba usando la etiqueta <form> dentro del componente React.js y la rendericé en una posición de página que ya tenía una <form> abierta. Las formas no se pueden anidar. Entonces puede obtener este error incluso si el HTML dentro del componente parece ser válido.

Answer 8

también puede ocurrir cuando React se carga desde dos ubicaciones diferentes (por ejemplo, de require y en el HTML)