검출되지 않은 오류:불변 위반: find ComponentRoot(......$110):요소를 찾을 수 없습니다.이것은 아마도 DOM이 예기치 않게 변환되었음을 의미합니다.

검출되지 않은 오류:불변 위반: find ComponentRoot(......$110):요소를 찾을 수 없습니다.이것은 아마도 DOM이 예기치 않게 변환되었음을 의미합니다.

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>):

검출되지 않은 오류:불변 위반: find ComponentRoot(... . . 0 . 1 . 0 . 0 . 0 . 0 . 0 . $ 9 .$109):> 요소를 찾을 수 없습니다.이는 DOM이 예기치 않게 (>브라우저에 의해) 변환되었음을 의미할 수 있습니다.보통 테이블을 사용할 때 를 잊어버렸기 때문입니다.n...

문제는 다음과 같은 가상 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>에러를 발생시킵니다.

테스트를 위해 이 작업을 수행하려고 할 때 위의 오류가 발생했습니다.

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]

React가 2개의 다른 위치(예: require와 HTML)에서 로드될 때도 발생할 수 있습니다.

같은 문제가 발생했는데, 알고 보니 같은 ID의 DOM 내의 2개의 요소였습니다(부정적으로).

제 경우 버튼의 종류에 문제가 있었습니다.ResactDOM은 다음 명령어를 사용하면 손실됩니다.type="button"에 있어서<button>.

제거했습니다.type="button"그리고 a를 추가했다.event.preventDefault()제 onClick 핸들러에서 작동했습니다.

이 문제는 react https://github.com/facebook/react/issues/3811에서도 확인하시기 바랍니다.이것은 현재 제한사항으로 React 렌더 메서드에서 여러 컴포넌트를 반환할 수 없습니다.따라서 여러 요소가 반환되는지 여부도 확인해야 합니다.

저도 비슷한 문제가 있었는데 그 이유는 제가 이 제품을<form>React.js 컴포넌트 내부에 태그를 붙이고, 나는 그것을 이미 가지고 있는 페이지 위치에 표시했다.<form>열려 있습니다. 양식은 중첩될 수 없습니다.따라서 컴포넌트 내의 HTML이 유효하다고 생각되어도 이 에러가 발생할 수 있습니다.

이 오류는 HTML 마크업이 유효하지 않기 때문입니다.

저 같은 경우에는 버튼 태그에 리액트가 폼태그를 생성하는 것이 서툴러서 이 에러가 나타나기 시작할 때까지 깨닫지 못했습니다.허용되지 않는 중첩 실수가 없는지 마크업을 확인합니다.

언급URL : https://stackoverflow.com/questions/25026399/uncaught-error-invariant-violation-findcomponentroot-110-unable-to