React Hooks：加載 state 顯示兩次

Question

我有一個isLoading useState 變量。 在下面的代碼中，特意注釋掉了isLoading(false)以強制加載 UI 對其進行測試。 但是我看到它渲染了兩次，知道為什么嗎？

API 調用

export default function App() { 
  const [upcoming, setUpcoming] = useState([]); 
  const [isLoading, setIsLoading] = useState(false);

 useEffect(() => {
    const fetchUpcoming = async () => {
      setIsLoading(true);

      const res = await fetch(
        "https://api.themoviedb.org/3/movie/upcoming?api_key={API_KEY}&language=en-US&page=1"
      );
      const data = await res.json();
      const results = data.results;

      setUpcoming(results);
      // setIsLoading(false);
    };

    fetchUpcoming();
  }, []);

return (
    <div className="App">
      <Recommendations title={"Upcoming"} data={upcoming} loading={isLoading} />
    </div>
  );
}

渲染結果

export default function Recommendations({ title, data, loading }) {
  return (
    <div className="recommendationSection">
      <h3>{title}</h3>
      {loading ? (
        <h3>Loading...</h3>
      ) : (
        data.map((movie) => {
          return (
            <div className="banner" key={movie.title}>
              <img
                src={
                  movie.poster_path
                    ? `https://image.tmdb.org/t/p/original/${movie.poster_path}`
                    : "https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg"
                }
                alt={movie.title}
              />
            </div>
          );
        })
      )}
    </div>
  );
}

Answer 1

在這里找到答案： https://github.com/kenwheeler/slick/issues/940#issuecomment-181815974

我發現第二個實例有一個slick-cloned的 class，基本上因為我使用的是光滑 Slider，它正在克隆我的元素。 解決方法是在我的 slider 設置中添加infinite: false 。