播放器组件在循环渲染时播放回声

Posted 2023-02-21

【中文标题】播放器组件在循环渲染时播放回声

【英文标题】：Player component plays with an echo when rendered in a loop

【发布时间】：2021-12-01 23:21:20

【问题描述】：

我正在尝试为具有.m3u8 值的表单字段调用播放器组件。在我的例子中，有 2 个表单域最终显示了播放按钮。 当我尝试单击其中一个字段的播放图标时，它开始播放，但我在视频中听到双重声音/回声。播放器组件在其<div> 上有ref 属性，我怀疑当我单击播放按钮时，播放器会同时触发两个字段。

当我尝试只为一个表单域渲染播放器时，一切正常。我不确定如何解决回声问题。请帮忙。这是我的代码：

Formfields.js
-------------
const initPlay = (item) => 
    return (
      <div>
        <MediaComponent
          playUrl=item.value
        />
      </div>
    )
  

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


MediaComponent.js
-----------------
const MediaComponent = ( playUrl ) => 
  
  const playMedia = useCallback(() => 
   // Pass src url to player hook 
    setSrc(playUrl)
    setVisible(true)
  , [playUrl, setSrc, setVisible])

  return (
    <div>
      <span
        onClick=() => playUrl()
        style= cursor: 'pointer' 
      >
        <Icon name="play”/>
      </span>
      <Player/> // This is the Player component that I am talking about
    </div>
  )

【参考方案1】：

解决方案：

回显是因为 <Player/> 组件已添加到具有 m3u8 字符串的每个字段中。正确的做法是在 </table> 标记结束之前在 FormFields.js 的父级别定义 Player 组件。这样我们可以确保只有一个 Player 实例可用于所有字段，并且在单击播放按钮时我们可以设置播放器滚动。