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

Question

我正在尝试为其值具有 .m3u8 的表单字段调用播放器组件。在我的例子中，2 个表单字段最终显示了播放按钮。当我尝试单击其中一个字段的“播放”图标时，它开始播放，但我在视频中听到双音 sound/echo。播放器组件在其 <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>
  )
}

Answer 1

解决方案：

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

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

Player component plays with an echo when rendered in a loop

ref

html5-video

reactjs

react-redux

react-hooks