reactjs - 如何在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 只是你以后需要的数据，但它不会改变，你也不需要将它设置为 state。

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