【React】ページ切り替え後、vimeo APIで表示したiframeの中身が切り替わらない・再描画できない

Question

---

追記

質問をしてから、気付きました。
iframeが表示されないのは、stateで管理されていないからかもしれません。
iframeにstateして、再描画できるようにしてみます。

→ うまくいかない。

どうやら、
前の <Vimeo /> をアンマウントする前に、次の <Vimeo /> がマウントされているのが原因？

---

前提・実現したいこと

実現したいこと
ページネーションでのページ切り替え時に、
vimeoのiframeの中身が切り替わらないため、
切り替えて表示させたいです。

前提

• react
• ページネーションは、@material-uiを使用。
• firebase realtime database

表示しているリストのデータについて

• リストを全件取得
• リストを分割してページごとに出し分け

発生している問題・エラーメッセージ

• 画面上でだけ、iframeの中身が変更されない。
• videoIdの変更は、コンポーネントに渡って来ている。

該当のソースコード

vimeoを表示している部分

// Vimeo.js
import React, { useEffect, useState } from 'react'
import Player from "@vimeo/player"
import { itemRef } from '../../firebase'

export const Vimeo = (props) => {
  const { videoId, item } = props
  const uploadState = !!item.videoUploaded
  const [uploaded, setUploaded] = useState(uploadState)

  const iframeId = `vimeo-${videoId}`

  // vimeoのアップロードが完了したか確認
  // アプロード完了フラグは、DBで管理
  const check = (player) => {
    if (!uploaded) {
      player.getVideoUrl().then((url) => {
        console.log('動画のURL;', url);
        setUploaded(true)
        itemRef.child(item.key).update({videoUploaded: true})
      }).catch((error) => {
        console.log('error', error, videoId);
      })
    }
  }

  // マウント時・uploaded変更時に実行
  useEffect(() => {
    const options = { id: videoId }

    // vimeo player 作成
    const player = new Player(iframeId, options)
    console.log("player", player) // 切り替わっている

    // 最初に１回実行
    check(player)

    let time = null
    // タイマーでアップロード済みか確認
    if (!uploaded) {
      time = setInterval(() => { check(player) }, 60000)
    } else {
      clearInterval(time)
    }

    // アンマウント時にタイマークリア
    return () => clearInterval(time)
  }, [uploaded, videoId])

  return (
    <div
      className="embed-container"
      style={{ width: '100%' }}
    >
      <div id={iframeId}>{/* ここのidは、ページ切替時に正常に変更される */}
        {/* Playerにより、ここにiframeが表示される￥ */}
        {/* ↓ 表示されるiframeは、こんな感じ。ここが変更されない。
          <iframe 
            src="https://player.vimeo.com/video/00000?title=0&amp;byline=0&amp;portrait=0&amp;app_id=xxxxx" 
            width="640" height="360" 
            frameborder="0" 
            allow="autoplay; fullscreen; picture-in-picture" 
            allowfullscreen="" 
            title="xxxxxxxx" 
            data-ready="true">
          </iframe>
        */}
      </div>
    </div>
  )
}

投稿１つ分、表示部分

// Item.js
import React, { useEffect } from 'react'
import { Card } from '@material-ui/core'
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
import { Vimeo } from './common/Vimeo'

const Item = React.memo((props) => {
  const { content } = props
  const { key, video } = content

  // video id 取得
  const uri = video.url // https://vimeo.com/manage/videos/00000000
  const pos = uri.lastIndexOf('/')
  const videoId = uri.slice(pos + 1) // 00000000

  return (
    <Card id={`item-${key}`}>
      <p>ここにビデオが表示されます</p>
      <Vimeo videoId={videoId} item={content} />
    </Card >
  )
})
export default withWidth()(Item)

一覧ページ

// Lists.js
import React, { useState, useEffect, useContext } from 'react'
import { List } from '@material-ui/core'
import Pagination from '@material-ui/lab/Pagination'
import Item from './Item'
import { GlobalContext } from '../../hooks/reducer'
import { itemRef } from '../../firebase'

const Lists = React.memo((props) => {
  const { state: { sample }, dispatch } = useContext(GlobalContext)
  const { list } = sample

  // ページの設定
  const [page, setPage] = useState(1)
  const [totalPages, setTotalPages] = useState(0)
  const perPage = 20
  const startNum = (page - 1) * perPage

  useEffect(() => {
    // マウント時にリストを全件取得
    itemRef
      .orderByKey()
      .on('value', (snapshot) => {
        const lists = snapshot.val()
        if (lists === null) { return dispatch({ type: 'SET_LISTS', data: [] }) }
        const newLists = Object.entries(lists).map((entry) => {
          const [key, content] = entry
          return { key, ...content }
        })
        dispatch({ type: 'SET_LISTS', data: newLists })
      })
  }, [])

  useEffect(() => {
    // ページ数を取得
    setTotalPages(Math.ceil(list.length / perPage))
  }, [list])

  return (
    <div>
      <List>
        {
          list.length > 0 && (
            list.slice(startNum, startNum + perPage).map((content, key) => {
              return <Item content={content} />
            })
          )
        }
      </List>

      {/* ページネーション */}
      { list.length > 0 && <Pagination count={totalPages} size="large" page={page} onChange={(e, newPage) => setPage(newPage)} /> }
    </div >
  )
})
export default Lists

listのデータ構造

list = [
  {
    "key": "xxxx",
    "video": {
      "url": "/videos/000000"
    },
    "videoUploaded": true
  },
  // ...
]

試したこと

マウント時にiframeをリロードすればいいと思い、実装しましたが、それもうまくいきません。
おそらく、読み込み完了前のためです。

エラー

TypeError: Cannot read property 'location' of undefined

// Vimeo.js

  // iframeをreloadする
  const reloadIframe = (iframeId) => {
    // フレームのDOM要素を取得
    const target = document.getElementById(iframeId)
    // フレームをreload
    target.contentWindow.location.reload(true)
  }

  useEffect(() => {
    // ....省略

    reloadIframe(iframeId)

    return () => clearInterval(time)
  }, [uploaded, videoId])

onloadは効きませんでした。

  const reloadIframe = (iframeId) => {
    const target = document.getElementById(iframeId)
    target.onload = (e) => {
      // そもそもここに来ない
      console.log("onloaded")
      target.contentWindow.location.reload(true)
    }
  }

Answer 1

・動的にiframeを作成
・iframeIdが変更されたとき、iframe内のsrcを変更ｓる
iframeElement.src = "xxxxx"

<div id={iframeId}></div>