如何在 React js 初始化時將一個 state 值傳遞給另一個 state

Question

我正在嘗試將一個 state 值（即 imagesArray）傳遞給另一個 state（即 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”屬性中定義組件名稱，然后使用該實例化它。渲染方法：

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組件）並將其呈現。

Answer 2

I will show in functional component it will useful for someone.


import "./styles.css";
import image1 from '../image/man.png';
import image2 from '../image/woman.png';
import React,{useState} from 'react';`enter code here`
import Avatar from '@mui/material/Avatar';

export default function App() {

  const [choose,setChoose] =useState("")
const [avatar,setAvatar] = useState(image);


  return (
    <div className="App">
       
      <Avatar 
        alt="D S"
        src={avatar}
        sx={{ width: 44, height: 44 }}
      />
     
       <div>
          <Avatar className='Avatars' onClick={()=> setChoose(image1)} alt="Guest"
           src={image1} sx={{ width: 30, height: 30 }}/>
           <label>Guest</label>
           </div>
        <div>
          <Avatar className='Avatars' onClick={()=> setChoose(image2)} alt="Other" 
          src={image2} sx={{ width: 30, height: 30 }}/>
          <label>Other</label>
          </div>
          <div>
          <button className="avatar_btn1" onClick={()=>setAvatar(choose)} >OK</button>
          </div>
    </div>
  );
}


from my code first you can choose a avatar it will not change in frontend when you click ok button it will show avatar changed one.