MERN Stack中点击表格行按钮提交歌曲投票数据是否可行？

你的实现思路完全可行，投票功能本质是给每个歌曲文档新增投票计数字段，点击按钮触发计数更新，同步到数据库后刷新列表即可完成整套逻辑，具体实现步骤和最佳实践如下：

1. 调整MongoDB数据模型 #

首先给歌曲集合新增votes字段存储投票数，默认值设为0，参考模型代码：

// 后端Song模型示例
const mongoose = require('mongoose')
const songSchema = new mongoose.Schema({
  songTitle: String,
  album: String,
  // 新增投票计数字段
  votes: {
    type: Number,
    default: 0
  }
})
module.exports = mongoose.model('Song', songSchema)

2. 后端新增投票接口 #

新增专门的投票接口，使用MongoDB自带的原子操作$inc完成计数+1，避免并发场景下计数不准确的问题：

// 后端路由示例
router.put('/vote/:id', async (req, res) => {
  try {
    const updatedSong = await Song.findByIdAndUpdate(
      req.params.id,
      { $inc: { votes: 1 } }, // 原子操作直接给votes加1，无需先查再改
      { new: true } // 配置返回更新后的最新数据
    )
    res.json(updatedSong)
  } catch (err) {
    res.status(500).json({ message: '投票失败', error: err })
  }
})

3. 前端绑定按钮点击事件 #

修改Song组件给按钮绑定点击事件，调用父组件传入的投票方法，同时可以在页面直接展示当前票数：

const Song = props => (
    <tr>
      <td>{props.song.songTitle}</td>
      <td>{props.song.album}</td>
      <td>
        票数：{props.song.votes} <br/>
        <Link to={"/edit/"+ props.song._id}>edit</Link> | <a href="#" onClick={(e) => { 
        e.preventDefault();
        props.deleteSong(props.song._id) }}>delete</a>
      </td>
      <td>
          <button 
            style={{ /* irrelevant */ }}
            type="button" // 非表单场景把type改成button，避免触发默认表单提交
            className="btn waves-effect waves-light hoverable blue accent-3"
            onClick={() => props.voteSong(props.song._id)}
          >Choose Song</button>
      </td>
    </tr>
)

父组件新增投票方法，和你现有编辑、删除后的列表刷新逻辑复用即可：

// 父组件投票方法示例
voteSong = async (songId) => {
  try {
    await axios.put(`/api/vote/${songId}`)
    // 直接复用你现有更新歌曲列表的方法，比如拉取最新列表的接口
    this.getSongList()
  } catch (err) {
    console.error('投票异常', err)
  }
}

// 渲染Song组件时传入voteSong方法
songList = () => {
  return this.state.songs.map(song => 
    <Song 
      song={song} 
      deleteSong={this.deleteSong} 
      voteSong={this.voteSong} 
      key={song._id} 
    />
  )
}

行业最佳实践建议 #

• 防刷票优化：如果需要限制单个用户只能给同一首歌投一次，可以在用户模型中新增votedSongs数组存储已投歌曲ID，投票前先校验是否已投，避免重复投票。
• 交互优化：用户点击投票按钮后先将按钮置灰，接口返回结果后再恢复可点击状态，避免重复提交请求。
• 热门榜单实现：拉取歌曲列表时直接在数据库层按votes降序排序，性能远高于前端排序，参考查询语句：await Song.find().sort({ votes: -1 })。
• 计数安全：绝对不要前端传计算好的票数给后端更新，必须用数据库原子操作$inc处理计数，避免并发场景下的计数丢失问题。

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