web-dev-qa-db-ja.com

不明なエラー：不変違反：findComponentRoot（...、... $ 110）：要素が見つかりません。これはおそらく、DOMが予想外に変更されたことを意味します

Reactのネストされたサイクルで間違っていることは何ですか？ Googleで情報を検索しましたが、適切なものが見つかりませんでした。私が間違って理解していることを見つけてください。

図からわかるように、変数にデータがあります。そしてそれはうまく機能します。しかし、この<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>);
        }
    });

エラー（another<tr>から追加されたアイテムによって異なります）：

不明なエラー：不変違反：findComponentRoot（...、.0.1.1.0.2.0.0.1。$ 0. $ 9. $ 109）：>要素が見つかりません。これはおそらく、通常はテーブルを使用しているときにaを忘れたために、DOMが予期せずに（たとえば、ブラウザーによって）変更されたことを意味します。

javascriptreactjsreact-jsx
42
Eldar Nezametdinov

問題は、次のような仮想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>

フィドル

反応が更新に行くとき、それはその<tr>を見て、<div>がどこに行ったのか疑問に思っています。代わりに、<td>を見つけるため、エラーがスローされます。

67
Brigand

私はテストのためにこれをしようとして上記のエラーを受け取りました：

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

私の修正は、レンダリングする前にラップすることでした：

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

Reactが2つの異なる場所からロードされたとき（たとえばrequireとHTMLから）

2
Ohad Milchgrub

私の場合、問題はボタンのタイプにありました。 _type="button"_で_<button>_を使用すると、ReactDOMが失われます。

_type="button"_を削除し、onClickハンドラーにevent.preventDefault()を追加しました。

0
jmartins

同様の問題があり、その理由は、React.jsコンポーネント内で<form>タグを使用し、<form>が既に開いているページ位置にレンダリングしたためです。フォームはネストできません。そのため、コンポーネント内のHTMLが有効であると思われる場合でも、このエラーを取得できます。

0
Tuomas Hietanen

また、react https://github.com/facebook/react/issues/3811 でこの問題を確認してください。これは、「複数のコンポーネントをReact render method。 "

0
Suchit Puri

これと同じ問題があり、同じIDを持つDOMの2つの要素であることが判明しました（偶然）。

0
Rob Johansen

このエラーは、無効なHTMLマークアップがどこかにあるためです。

私の場合、ボタンタグ内でフォームタグを生成し、このエラーが表示されるまで気付かなかったReact。

0
Matthew Corway