web-dev-qa-db-fra.com

Erreur non capturée: violation invariante: findComponentRoot (..., ... $ 110): impossible de trouver un élément. Cela signifie probablement que le DOM a subi une mutation inattendue

Qu'est-ce que je fais mal avec les cycles imbriqués dans React? J'ai cherché des informations dans Google et je n'ai rien trouvé de convenable. Pouvez-vous m'aider à trouver, ce que je comprends mal?

Comme on peut le voir sur la figure, j'ai des données dans une variable. Et ça marche bien. Mais lorsque j'ajoute une valeur non issue de cette <tr>, une erreur apparaît!

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

Erreur (dépend de l'élément ajouté d'un autre_<tr>):

Erreur non capturée: violation invariante: findComponentRoot (..., .0.1.1.0.2.0.0.1. $ 0. $ 9. $ 109):> Impossible de trouver l'élément. Cela signifie probablement que le DOM a subi une mutation inattendue (par exemple, par le> navigateur), généralement en raison de l’oubli de a lors de l’utilisation de tables, n ...... `.

javascriptreactjsreact-jsx
42
Eldar Nezametdinov

Le problème est que vous créez une structure de DOM virtuelle comme celle-ci:

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

Car <div/> _ n'est pas un enfant valide de <tr> le navigateur crée en fait un DOM représentant ceci:

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

violon

Quand réagit pour mettre à jour, il regarde ce <tr> et se demandant où le <div> est allé. Au lieu de cela, il trouve un <td> donc ça jette une erreur.

67
Brigand

J'ai eu l'erreur susmentionnée en essayant de faire cela pour un test:

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

Mon correctif était de l'envelopper avant de rendre:

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

il peut parfois aussi se produire lorsque React est chargé depuis deux emplacements différents (par exemple, require et dans le code HTML)

2
Ohad Milchgrub

Dans mon cas, le problème était avec le type du bouton. ReactDOM est perdu si vous utilisez un type="button" Dans un <button>.

J'ai enlevé le type="button" Et ajouté un event.preventDefault() sur mon gestionnaire onClick et cela a fonctionné pour moi.

0
jmartins

J'ai eu un problème similaire et la raison était que j'utilisais <form> balise à l'intérieur du composant React.js et je l'ai rendue à une position de page qui avait déjà un <form> ouvert. Les formulaires ne peuvent pas être imbriqués. Ainsi, vous pouvez obtenir cette erreur même si le code HTML à l'intérieur du composant semble être valide.

0
Tuomas Hietanen

Consultez également ce problème dans react https://github.com/facebook/react/issues/3811 , ceci indique que "le fait que vous ne puissiez pas renvoyer plus d'un composant React render méthode. "Vous devriez donc également vérifier votre rendu si il retourne plusieurs éléments

0
Suchit Puri

J'ai eu ce même problème et il s'est avéré qu'il y avait deux éléments dans le DOM avec le même ID (par inadvertance).

0
Rob Johansen

Cette erreur est due au fait qu’il existe un balisage HTML non valide quelque part.

Dans mon cas, j'avais maladroitement React généré une balise de formulaire dans une balise de bouton et je ne m'en suis jamais rendu compte tant que cette erreur ne commençait pas à apparaître. Vérifiez dans votre balise les erreurs d'imbrication qui ne sont pas autorisées.

0
Matthew Corway