UseEffect 中的 SetInterval 無延遲

Question

我正在用 React 構建一個電影應用程序來練習。

主頁上有一個帶有電影海報和電影信息的大橫幅，該橫幅的內容每 5 秒更改一次。 我為此創建了這個 function：

 const [movie, setMovie] = useState('');     //const movie returns object of one random movie

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(requests.fetchNetflixOriginals);  
      setMovie(
        request.data.results[
          Math.floor(Math.random() * request.data.results.length)
        ]
      );
    }
    const interval = setInterval(() => {
      fetchData();
    }, 5000)
   return () => clearInterval(interval)   
  }, [movie]);

這個解決方案有一個問題：我第一次運行這個應用程序時有 5 秒的延遲（由 setInterval 引起）。

所以我的問題是，如果有任何解決方案來獲得相同的行為，只是在開始時沒有延遲？

我嘗試了很多不同的解決方案，包括定義新狀態，但所有這些都會導致錯誤或無限循環。

謝謝！

Answer 1

定義間隔時只需調用fetchData ？

useEffect(() => {
    async function fetchData() {
        const request = await axios.get(requests.fetchNetflixOriginals);
        setMovie(
            request.data.results[
            Math.floor(Math.random() * request.data.results.length)
            ]
        );
    }
    fetchData();
    const interval = setInterval(fetchData, 5000)
    return () => clearInterval(interval)
}, [movie]);

Answer 2

是的，我已經嘗試過這個解決方案，首先調用 function 然后設置一個間隔。 但結果是橫幅開始有瘋狂的行為。 它在一秒鍾內無休止地改變了 10 倍。

我附上了一個完整的更新組件代碼，以確保我沒有錯過要發送的內容：

const Banner = () => {
  const [movie, setMovie] = useState({});

  useEffect(() => {
    async function fetchData() {
        const request = await axios.get(requests.fetchNetflixOriginals);
        setMovie(
            request.data.results[
            Math.floor(Math.random() * request.data.results.length)
            ]
        );
    }
    fetchData();
    const interval = setInterval(fetchData, 5000)
    return () => {
      clearInterval(interval)
    }
}, [movie]);

  function truncate(str, n) {
    return str?.length > n ? str.substr(0, n - 1) + '...' : str;
  }

  return (
    <header
      className='banner'
      style={{
        backgroundSize: 'cover',
        backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie?.backdrop_path})`, 
        backgroundPosition: 'center center',
      }}
    >
      <div className='banner__contents'>
        <h1 className='banner__title'>
          {movie?.title || movie?.name || movie?.original_name}
        </h1>
        <div className='banner__buttons'>
          <button className='banner__button'>Play</button>
          <button className='banner__button'>My List</button>
        </div>
        <h1 className='banner__description'>
          {truncate(movie?.overview, 120)}
        </h1>
      </div>
      <div className='banner--fadeBottom'></div>
    </header>
  );
};

任何想法應該導致它/如何防止這種行為？

Answer 3

在添加了另一個 useEffect 掛鈎后，我解決了這個問題。 但我不確定它是否會調用其他問題。

useEffect(() => { 
  fetchData()
})