將 react class 組件轉換為功能組件，完美渲染但功能丟失？

Question

我正在制作一個小型音頻播放器應用程序，並嘗試將我的 react class 組件轉換為功能組件。

class 組件的原始代碼在這里：

class Player extends React.Component {

    constructor(){
    super()

    this.state = {
        tracks: [
          {title: "first track", data: track1},
          {title: "second track", data: track2},
          {title: "third track", data: track3},
        ],
        currentTrack: 0,
    }

    }

     changeData(trackIndex){
      this.setState({currentTrack: trackIndex})
    }
  
    render(){
        return <div style={{color: this.props.color}}>
            <h1>Player</h1>
           <AudioPlayer
            src= {this.state.tracks[this.state.currentTrack].data}
            />
            <div style={{color: "green"}}>
                <ul>
                    {this.state.tracks.map((trackElem, index) => (
                       <li onClick={()=> this.changeData(index)}>{trackElem.title}</li>
                    ))}
                </ul>
            </div>
        </div>
    }
}

我嘗試了以下轉換：

const Player2 = () => {

   const Items = [
          {title: "first track", data: track1},
          {title: "second track", data: track2},
          {title: "third track", data: track3},
    ]; 

    const [activeTrack, setActiveTrack] = useState(0);

    function ChangeData(trackIndex) {
        setActiveTrack({activeTrack : trackIndex});
    }

    return (
        <div >
           <h1>Player</h1>
           <AudioPlayer
            src= {activeTrack.data}
            />
            <div >
                <ul>
                    {Items.map((trackElem, index) => (
                       <li onClick={()=> ChangeData(index)}>{trackElem.title}</li>
                    ))}
                </ul>
            </div>
        </div>
    )
}

除了刪除一些與樣式相關的道具之外，邏輯基本相同。 唯一的區別是當前軌道的處理，我試圖通過使用狀態來表示這一點。

當將 object 渲染到不同的頁面時，它在屏幕上看起來完全正常，唯一的問題是軌道本身不再觸發音頻播放器中的響應。

如果有人能找出我在轉換過程中遺漏的任何東西，真的會很感激嗎？

Answer 1

這里：

const [activeTrack, setActiveTrack] = useState(0);

所以activeTrack最初是 state 中的一個數字。 但是你這樣做了

src= {activeTrack.data}

這沒有任何意義 - 該數字沒有data屬性。 另一個問題是

setActiveTrack({activeTrack : trackIndex});

現在您將活動軌道設置為具有activeTrack屬性的 object，這也與上述兩種格式不同。

選擇一種方法來表示、設置和檢索整個組件中的 state，例如索引：

function ChangeData(trackIndex) {
    setActiveTrack(trackIndex);
}

<AudioPlayer
    src={Items[activeTrack].data}