等待api数据然后渲染react组件

Question

我正在尝试制作一个滑块组件从 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>
  );
}

Answer 1

首次渲染时（甚至在调用

useEffect

之前），

slides

是一个空数组。从空数组访问项目将返回

undefined

，并且无法从中读取属性

url

。

您可以在现有的

if (slides.length === 0) return null

语句上方添加类似

if (!slides[currentIndex]) return null

或

return

的子句，不渲染任何内容，或者您可以返回一些加载动画。

一般来说，请记住 React 是如何工作的：首先它会渲染带有初始

states

的组件。然后，

useEffect

将被调用。如果它修改了组件的状态（或任何状态），它将被重新渲染 - 这次可能会使用加载的值。