불변 위반 : 객체가 반응 자식으로 유효하지 않습니다. `Content`의 render 메소드를 확인하십시오.

Question

일단 페이지를 새로 고치고 같은 소도를 state.I에서 가져 와서 위의 오류가 발생하면 페이지가 다시로드되는 동안 왜 그런 일이 발생하는지 찾을 수 없습니다. 첫 번째로드 페이지가 잘로드 중입니다.

const Content = (props) => { 
     if (props.tabItem.contentList !== undefined) { 
     return (
      <div> 
      {props.tabItem.contentList.map((tab) => { 
       if (props.tabItem.currentTab === tab.tabId) { 
       return (
        <div key={props.tabItem.currentTab}> 
        {tab.content.props.children} 
        </div> 
       ); 
       } 
      })} 
      </div> 
     ); 
     } 
     return (
     <div>no record</div> 
    ); 
    }; 

My tabItem that saving in the state is like this:- 

tabList = [{ 
     tabId: '1', 
     tabName: 'Test' 
     isPrimary: true, 
     }, 
     ]; 
     // create new contentList 
     contentList = [ 
     { 
      tabId: '1', 
      content: <div> <Test1Container{...this.props} addTab={this.addTab} /></div>, 
     }, 
     ]; 
     tabData = { 
     tabList, 
     currentTab: '1', 
     contentList, 
     }; 
this.props.addTabItem(tabData); 
this.props.addTabItem is use to save the state. 

Answer 1

변경 : if 조건이 아무것도 반환하지 않습니다 경우 구성 요소에 실패하면

1, else 조건을 작성합니다.

을 jsx 안에 사용할 수 없으므로 조건부 렌더링에 3 진수 연산자를 사용하십시오.

props.tabItem.currentTab 

4.을 반환 null 조건이 map 체내 실패했을 경우

3.currentTab이이 값의 액세스하는 것처럼 그렇게 쓰기 tabData 내부에 존재입니다.

사용이 :

const Content = (props) => { 
    if (props.tabItem.contentList !== undefined) { 
    return (
     <div> 
     {props.tabItem.contentList.map((tab) => { 
      return props.tabItem.tabData.currentTab === tab.tabId ? 
       <div key={props.tabItem.currentTab}> 
        {tab.content.props.children} 
        </div> 
        : null 
     })} 
     </div> 
    ) 
    }else{ 
     return null 
    } 
} 

확인이 샘플 작업 조각 : 나는의 재로드에, 아직도 내가 같은 오류가 발생하고, 질문을 업데이트

var a = <div><p>hello</p><p>world</p></div> 
 

 
var App = (props) => { 
 
    return <div>{props.a.props.children}</div> 
 
} 
 

 
ReactDOM.render(<App a={a}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>