如何在反应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 定义为 class 之外的常量或类似的东西，并在设置 tabData 时引用它。

编辑：

更多。如果 tabData 只是您以后需要的数据，但不会更改，则您也不需要将其设置为状态。

编辑 2： 如果这两个数组确实需要处于状态，一种达到预期效果的方法是在每个 tabData 项的 'content' 属性中只定义组件名称，然后使用它来实例化它在渲染方法中：

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

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

How to pass one state value to another state on initialization in react js

javascript

arrays

json

reactjs

react-jsx