반응 js에서 초기화시 하나의 상태 값을 다른 상태로 전달하는 방법

Question

imagesArray 인 하나의 상태 값을 tabData라는 다른 상태로 전달하려하지만 정의되지 않은 상태로 나오고 코드를 PFB로 보내주십시오. 여기에서 잘못하고있는거야?

constructor(props) { 
    super(props); 
    this.state = {   
     imagesArray: [ 
      { 
       default: '/images/volImage1.png', 
       active: 'images/volImage1.png' 
      }, 
      { 
       default: '/images/volImage2.png', 
       active: 'images/volImage2-Active.png' 
      }, 
      { 
       default: '/images/volImage3.png', 
       active: 'images/volImage3.png' 
      }, 
      { 
       default: '/images/volImage4.png', 
       active: 'images/volImage4.png' 
      }, 
      { 
       default: '/images/volImage5678.png', 
       active: 'images/volImage5678.png' 
      }, 
     ], 
     tabData: [ 
      { 
       title: 'Knowledge and experience', 
       content: <VolunteerTabContent1 imagesArray={this.state.imagesArray} /> 
       //Here I am passing above imagesArray state, and this is coming as undefined and throwing error 
      }, 
      { 
       title: 'Practical and hands on', 
       content: 'Tab 2 Content' 
      }, 
      { 
       title: 'Management and leadership', 
       content: 'Tab 3 Content' 
      }, 
     ] 

    } 
} 

Answer 1

상태 자체를 설정할 때 this.state를 사용할 수 없습니다. 이것은 전혀 작동하지 않습니다.

경우에 따라서는 실행 중에 imagesArray가 변경되지 않고 필요한 일부 데이터 일 뿐이므로 구성 요소 상태의 일부로 설정할 필요가 없을 수도 있습니다.

imagesArray를 클래스 외부의 상수 또는 이와 유사한 것으로 정의 할 수 있으며 tabData를 설정할 때 이것을 참조 할 수 있습니다.

편집 :

더욱. tabData가 나중에 필요한 데이터 일뿐 변경되지는 않을 것이므로 state로 설정하지 않아도됩니다.

편집 2 : 이 두 배열 정말 상태에있을 필요가 있다면, 원하는 결과를 달성하기위한 방법은 각 tabData 항목의 '내용'속성 만 구성 요소 이름을 정의하는 다음 것 렌더링 방법을 인스턴스화하는 것을 사용

tabData: [ 
    { 
    title: 'Knowledge and experience', 
    content: VolunteerTabContent1 
    }, 
    ... 

을하고 렌더링 방법으로 당신이 할 수 있습니다

// Let's suppose you want the first one as an example. Do this as you need. 
const item = this.state.tabData[0]; 

render() { 
    <item.content imagesArray={this.state.imagesArray} /> 
} 

올바르게 imagesArray가 상태를 형성 얻을 것이다이 방법을. JSX는 item.content의 값 (이 경우 VolunteerTabContent1 구성 요소)을 가져 와서 렌더링합니다.