React中Select传递对象异常：移歌曲到播放列表仅首项生效

我仔细看了你的代码，发现几个核心问题导致只有第一首歌能被正确添加到播放列表，其他歌曲无法正常选中或操作：

1. Select组件的value绑定与option的value类型不匹配 #

你初始化selectValue为this.props.songs[0]（一个完整的歌曲对象），但<option>标签的value属性设置的是song.title（字符串类型）。React的Select组件要求value属性和option的value类型完全一致，否则无法正确同步选中状态——这就是为什么只有第一个选项能生效：初始值刚好匹配第一个option的显示文本，但后续选择时类型不匹配，导致selectValue根本无法更新。

2. handleChange方法的取值逻辑错误 #

你在handleChange里写了event.target.selectValue，这是一个不存在的属性，正确的取值应该是event.target.value。但因为我们需要的是完整的歌曲对象而非标题字符串，所以不能直接用value值，得通过选中的标识去找到对应的歌曲对象。

3. 移除歌曲的逻辑缺失且错误 #

你注释掉了从songs数组移除选中歌曲的代码，而且原代码里的tempSongs.remove是错误用法——JavaScript数组并没有remove方法，应该用filter来过滤掉选中的歌曲。

修复后的关键代码修改 #

第一步：修正Select组件的option和value绑定 #

把option的value改为歌曲的唯一标识（比如id），这样能精准定位到对应的歌曲对象：

let optionItems = songList.map((song) => 
  <option value={song.id} key={song.id}>{song.title}</option> 
);

第二步：修复handleChange方法 #

通过选中的id找到对应的歌曲对象，更新selectValue状态：

handleChange(event) {
  const selectedId = event.target.value;
  const selectedSong = this.state.songs.find(song => song.id === selectedId);
  this.setState({ selectValue: selectedSong });
}

第三步：完善handleSubmit方法，实现完整的迁移逻辑 #

用filter方法从songs数组中移除选中的歌曲，同时将其添加到playlist数组：

handleSubmit(event) {
  event.preventDefault();
  if (!this.state.selectValue) return; // 防止空选提交

  this.setState(prevState => ({
    playlist: [...prevState.playlist, prevState.selectValue],
    songs: prevState.songs.filter(song => song.id !== prevState.selectValue.id)
  }));
}

第四步：修正Select的初始value值 #

把selectValue的初始值改为第一首歌的id，保持和option的value类型一致：

this.state = {
  // ...其他状态不变
  selectValue: this.props.songs[0]?.id || '' // 可选链语法防止数组为空时报错
};

额外优化建议 #

• 尽量避免直接操作DOM（比如你在playAll里用document.getElementById控制音频），React推荐用状态来驱动UI和组件行为，可以给每个音频组件绑定对应状态，通过状态变化来控制播放、暂停、循环等操作。
• 渲染歌曲列表时，不要在循环中创建Route组件，应该把Route放在循环外部，或者用更合理的方式传递路由参数。

内容的提问来源于stack exchange，提问作者Liad Levy