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

编辑2: 如果这两个数组确实需要处于状态，则实现所需结果的一种方法是在每个 tabData 项的“content”属性中仅定义组件名称，然后使用它在 render 方法中实例化它:

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 组件)并呈现它。