-
리액트 processUpdates(): Unable to find childJavaScript/React.js 2017. 9. 18. 17:54
아직 많은 경험이 부족한 탓에 구글링을 열심히 하면서 에러를 해결해 나가고 있는중이다..
리액트는 엄격한 웹표준을 따르는거 같다.. (아니면 알고리즘을 그렇게 짜놓았는지는 모르겠지만)
우선 저는 최초 ajax로 서버에서 값을 json으로 받아서 값을 output 후 사용자가 검색 버튼을 클릭 시
다시 ajax로 리스트 데이터를 변경 시키는 작업에 있었습니다.
그런데 예상치도 못한 processUpdates(): Unable to find child 에러가 발생한것!!
최초 이상없이 ouput을 하였는데도 불구하고 값을 변경하면 저런 에러가 발생을 하는게 이해가 안갔다..
그래서 반나절동안 구글링한 결과 해답을 찾았다...
<!-- JSP -->
<table>
<tr>
<td>제목1</td>
<td>제목2</td>
</tr>
<%
for(int i = 0; i < 10; i++) {
%>
<tr>
<td>불라1</td>
<td>불라2</td>
</tr>
<%}%>
</table>
이렇게 사용을 하는데( 위에서 말하던 ajax사용하는 부분은 아닙니다)
리액트 에서는
이상하게 <table>태그로 감싸서 만들지 않으면 에러가 발생을 한다...
다음과 같이 해결함
<!-- 리액트 -->
dataList (data) {
return data.map(function(data, index){
return(
<table key={i}>
<tr>
<td>{data.컬럼}</td>
</tr>
</table>
);
});
}
render() {
return(
<table>
<tr>
<td>제목1</td>
<td>제목2</td>
</tr>
</table>
{dataList(this.state.불라불라)}
);
}
윗부분이 정답은 아닐것입니다. 하지만 혹시라도 위 방법 말고 다른 해결 방안을 아신다면 댓글로 제시해주시면 감사하겠습니다.
추가적으로 왜 이러한 에러가 발생하는지 명확하게 알게되면 게시글을 수정하도록 해서 공유하도록 하겠습니다 .
'JavaScript > React.js' 카테고리의 다른 글
리액트 table 태그에 colspan 먹이기 (0) 2017.09.05 리액트 jsp 스크립틀릿 사용시 에러났던 이유 (0) 2017.08.31