React组件异步数据加载与条件渲染实践

// ...
return (
    <div>
      {/* 错误发生点：slides 可能是空数组，导致 slides[currentIndex] 为 undefined */}
      <div style={{ backgroundImage: `url(${slides[currentIndex].url})` }}>
        <h1>{slides[currentIndex].name}</h1>
        <p>{slides[currentIndex].description}</p>
      </div>
      {/* ... 其他部分 ... */}
    </div>
);

import React, { useState, useEffect } from 'react';
import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs';
import { RxDotFilled } from 'react-icons/rx';

function SliderComponent() {
  const [slides, setSlides] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isLoading, setIsLoading] = useState(true); // 新增加载状态

  useEffect(() => {
    const dataFetch = async () => {
      try {
        setIsLoading(true); // 开始加载，设置isLoading为true
        const response = await fetch("http://localhost:5000/api/data");
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setSlides(data);
      } catch (error) {
        console.error("Failed to fetch slides:", error);
        // 可以在这里处理错误，例如设置一个错误消息状态
      } finally {
        setIsLoading(false); // 无论成功失败，加载结束，设置isLoading为false
      }
    };

    dataFetch();
  }, []); // 空依赖数组确保只在组件挂载时运行一次

  const prevSlide = () => {
    if (slides.length === 0) return; // 防止在无数据时操作
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  };

  const nextSlide = () => {
    if (slides.length === 0) return; // 防止在无数据时操作
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  };

  const goToSlide = (slideIndex) => {
    if (slides.length === 0) return; // 防止在无数据时操作
    setCurrentIndex(slideIndex);
  };

  // 根据加载状态和数据可用性进行条件渲染
  if (isLoading) {
    return <div style={{ textAlign: 'center', padding: '20px' }}>加载中...</div>;
  }

  if (slides.length === 0) {
    return <div style={{ textAlign: 'center', padding: '20px' }}>暂无数据。</div>;
  }

  // 确保 slides[currentIndex] 存在，以防万一
  const currentSlide = slides[currentIndex];
  if (!currentSlide) {
      return <div style={{ textAlign: 'center', padding: '20px' }}>当前幻灯片数据缺失。</div>;
  }

  return (
    <div style={{ maxWidth: '800px', margin: 'auto', position: 'relative', overflow: 'hidden' }}>
      <div 
        style={{ 
          backgroundImage: `url(${currentSlide.url})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          height: '400px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          alignItems: 'center',
          color: 'white',
          textShadow: '2px 2px 4px rgba(0,0,0,0.7)'
        }}
      >
        <h1>{currentSlide.name}</h1>
        <p>{currentSlide.description}</p>
      </div>

      {/* Left Arrow */}
      <div style={{ position: 'absolute', top: '50%', left: '10px', transform: 'translateY(-50%)', cursor: 'pointer', color: 'white' }}>
        <BsChevronCompactLeft onClick={prevSlide} size={30} />
      </div>
      {/* Right Arrow */}
      <div style={{ position: 'absolute', top: '50%', right: '10px', transform: 'translateY(-50%)', cursor: 'pointer', color: 'white' }}>
        <BsChevronCompactRight onClick={nextSlide} size={30} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
        {slides.map((slide, slideIndex) => (
          <div 
            key={slideIndex} 
            onClick={() => goToSlide(slideIndex)} 
            style={{ cursor: 'pointer', margin: '0 5px', color: slideIndex === currentIndex ? 'blue' : 'gray' }}
          >
            <RxDotFilled size={20} />
          </div>
        ))}
      </div>
    </div>
  );
}

export default SliderComponent;