将 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>
    )
}

除了删除一些与样式相关的道具外，逻辑基本相同。唯一的区别是当前轨道的处理，我试图用状态来表示它。

将对象呈现到不同的页面时，它在屏幕上看起来完全正常，唯一的问题是轨道本身不再触发音频播放器中的响应。

如果有人能指出我在进行转换时遗漏的任何内容，我将不胜感激？

Answer 1

这里：

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

所以 activeTrack 最初是一个 number 状态。但后来你做了

src= {activeTrack.data}

这没有意义 - 该数字没有 data 属性。另一个问题是

setActiveTrack({activeTrack : trackIndex});

现在您将活动轨道设置为具有 activeTrack 属性的对象，这也与上述两种格式不同。

选择一种方式来表示、设置和检索整个组件的状态，例如索引：

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

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

将 React class 组件转换为功能组件，渲染完美但功能丢失？

Converting react class component to functional component, rendering perfectly but functionality lost?

javascript

reactjs

react-hooks

react-class-based-component