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 }, ...

然后在render方法中你可以这样做：

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

如何在初始化反应js

1 个答案: