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 。