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

【问题标题】：Converting react class component to functional component, rendering perfectly but functionality lost?将 React 类组件转换为功能组件，完美渲染但功能丢失？
【发布时间】：2021-08-07 08:13:14
【问题描述】：

我正在制作一个小型音频播放器应用程序并尝试将我的 react 类组件转换为功能组件。

类组件的原始代码在这里：

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

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

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

如果有人能指出我在转换过程中遗漏的任何内容，我会非常感激吗？

【问题讨论】：

标签： javascript reactjs react-hooks react-class-based-component

【解决方案1】：

这里：

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

所以activeTrack 最初是一个处于状态的数字。但是你这样做了

src= {activeTrack.data}

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

setActiveTrack({activeTrack : trackIndex});

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

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

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

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

【讨论】：