循环渲染Player组件时点击播放出现双音回声该怎么解决？

问题根因 #

1. 共享状态污染：你代码中的setSrc、setVisible属于全局/父组件共享状态，而非每个MediaComponent的内部独立状态。点击任意播放按钮修改共享状态后，所有已渲染的Player组件都会同步响应状态变更，同时播放相同流导致回声。
2. 事件绑定错误：MediaComponent中播放按钮的onClick事件错误调用了字符串类型的playUrl，你实际需要调用的是内部定义的playMedia方法。
3. 多Player实例冗余：每个符合条件的表单项都渲染了独立的Player实例，完全没有必要，反而容易出现状态串扰问题。

修复方案 #

方案1：快速修复（每个MediaComponent独立状态）

给每个MediaComponent添加内部独立的播放状态，避免共享状态串扰，不可见时直接卸载Player避免后台占用。

// MediaComponent.js 修复后代码
import { useState, useCallback } from 'react'
const MediaComponent = ({ playUrl }) => {
  // 把状态挪到组件内部，每个实例独立维护
  const [visible, setVisible] = useState(false)
  const [src, setSrc] = useState('')
  
  const playMedia = useCallback(() => {
    setSrc(playUrl)
    setVisible(true)
  }, [playUrl])

  return (
    <div>
      <span
        onClick={playMedia} // 修正事件绑定
        style={{ cursor: 'pointer' }}
      >
        <Icon name="play"/>
      </span>
      {/* 不可见时直接卸载Player，避免多实例后台运行 */}
      {visible && <Player src={src} onClose={() => setVisible(false)} />}
    </div>
  )
}

方案2：最优方案（全局单Player实例）

只保留一个全局Player浮层，所有播放按钮点击时仅传入对应播放地址，从根源避免多实例冲突。

// Formfields.js 修复后代码
import { useState } from 'react'
const Formfields = () => {
  // 把播放状态提到父层，全局共用一个Player
  const [playVisible, setPlayVisible] = useState(false)
  const [currentPlayUrl, setCurrentPlayUrl] = useState('')

  const initPlay = (item) => {
    return (
      <div>
        <span 
          style={{cursor: 'pointer'}}
          onClick={() => {
            setCurrentPlayUrl(item.value)
            setPlayVisible(true)
          }}
        >
          <Icon name="play"/>
        </span>
      </div>
    )
  }

  return (
    <>
      <table>
        <tbody>
          {formFields.map(prop =>
            <tr key={prop.id}>
              <td>{prop.name}</td>
              <td>{typeof prop.value == "string" && prop.value?.includes('m3u8') ?
                initPlay(prop) : null}
              </td>
            </tr>
          )}
        </tbody>
      </table>
      {/* 全局唯一Player浮层 */}
      {playVisible && <Player 
        src={currentPlayUrl} 
        onClose={() => setPlayVisible(false)} 
      />}
    </>
  )
}

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