我试图使滑块组件从API获取数据，但我不知道如何先获取数据，然后将其馈送到组件。据我所知，在我的实现中，组件试图在从API中提取数据之前呈现。

const [slides, setSlides] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const dataFetch = async () => {
      const data = await (
        await fetch("http://localhost:5000/api/data")
      ).json();

      setSlides(data);
    };

    dataFetch();
  }, []);

  const prevSlide = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  };

  const nextSlide = () => {
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  };

  const goToSlide = (slideIndex) => {
    setCurrentIndex(slideIndex);
  };

 return (
    <div>
      <div style={{ backgroundImage: `url(${slides[currentIndex].url})` }}>
        <h1>{slides[currentIndex].name}</h1>
        <p>{slides[currentIndex].description}</p>
      </div>

      {/* Left Arrow */}
      <div>
        <BsChevronCompactLeft onClick={prevSlide} size={30} />
      </div>
      {/* Right Arrow */}
      <div>
        <BsChevronCompactRight onClick={nextSlide} size={30} />
      </div>
      <div>
        {slides.map((slide, slideIndex) => (
          <div key={slideIndex} onClick={() => goToSlide(slideIndex)}>
            <RxDotFilled />
          </div>
        ))}
      </div>
    </div>
  );
}