javascript 等待API数据,然后呈现react组件

z9ju0rcb  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(114)

我试图使滑块组件从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>
  );
}
hmmo2u0o

hmmo2u0o1#

当第一次呈现时(在useEffect被调用之前),slides是一个空数组。访问空数组中的项将返回undefined,并且无法从中读取属性url
您可以在现有的return语句no render nothing的正上方添加像if (slides.length === 0) return nullif (!slides[currentIndex]) return null这样的子句,或者您可以返回一些加载动画。
一般来说,请记住React是如何工作的:首先,它以初始值states呈现组件。然后,将调用useEffect。如果它修改了组件的状态(或者任何状态),它将被重新呈现--这一次可能会加载值。

相关问题