如何在初始化时将一个状态值传递给另一个状态

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只是后面需要的数据，但不会改变，您也不需要将其设置为状态。

编辑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组件）并呈现它。