當狀態改變時，React 視頻組件不會更新

Question

我正在嘗試創建一個視頻播放器，但我遇到了這個問題。 在 React 中，我有一個從服務器獲取 JSON 的頁面，然后創建簡單的 href 來更改視頻。 HTML5 播放器作為一個組件引入，帶有提供控件、src、描述等的對象的道具。我放置控制台日志以查看信息是否被傳遞，當頁面重新加載時，狀態是正確的，但是，視頻沒有反映狀態變化。

我已經用盡了所有途徑。 任何幫助，將不勝感激。

const FS5VideoPlayer = () => {
  //Generate the playList
  const [isLoaded, SetIsLoaded] = useState(false);
  const [error, SetError] = useState(null);
  const [items, SetItems] = useState([]);
  const [nowPlaying, SetNowPlaying] = useState("");


  // Needs to work on variable declaration and not hardcoded
  const url = 'http://localhost:8080/videos/videolist'

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(json => {
        SetItems(json.videos);
        SetIsLoaded(true);
      })
      .catch(error => {
        SetError(error);
        SetIsLoaded(true);
      });

  }, []);
  if (error) {
    return <div>{error}</div>;
  }
  else if (!isLoaded) {
    return <div>Loading...</div>;
  }
  else {
    console.log(items[0].src);
    console.log("loading-nowPlaying", nowPlaying);
    if (nowPlaying === "") {
      SetNowPlaying(items[0]);
      console.log("Initial Load")
    }
    else {
      console.log("all good")
    }
  }

  function playVideo(videoObj) {
    console.log("videoObj", videoObj);
    SetNowPlaying(items[videoObj]);

    console.log("Now Playing", nowPlaying);

  }
  return (
    <>
      <div className="container-fluid">
        <HTML5Video
          videoInfo={nowPlaying}
        />
        <div>
          {
            // Map Video List 
            //

            items.map((videos, index) => {
              return (
                <div key={videos.id}>
                  <a href="#" onClick={() => playVideo(index)}>
                    {videos.title}
                  </a>
                </div>
              )
            }
            )}


        </div>
      </div>
    </>
  );
};

HTML5 播放器

const HTML5Video = ({ videoInfo }) => {
  const urlPath = () => {
    const hostname = window.location.hostname;
    const port = window.location.port;
    const myDocker = `http://${hostname}:${port}`
    const myDev = "http://localhost:8080";
    if (port === "3000") {
      return myDev;
    } else {
      return myDocker;
    }
  }
  console.log("HTML5", videoInfo);
  /**
   * Adding logic for chromecast button
   * Currently throwing a lot of erros. Revisit
   * https://stackoverflow.com/questions/44999267/how-to-chromecast-enable-a-website/49089116
   */


  return (
    <div>

      <h2>HTMLFiveVideo</h2>
      <video width="720" controls={videoInfo.defaultControls}>
        <source src={`${urlPath()}/videos/videofiles?videosrc=${videoInfo.src}`} />
        {console.log(urlPath())}
      </video>


    </div>
  );
};

export default HTML5Video;

Answer 1

我遇到了類似的問題。 我的解決方案是在向狀態添加新值之前設置超時並在之前清除它。

問題可能是因為 setState() 通常是異步的，這意味着當您想要查看狀態更改時，它尚未更新。

const watchNewVideo = (video) => {
setTopVideo(null);
setTimeout(() => {
  setTopVideo(video);
}, 10);

};