React Awesome Slider新增数据时不重置自动播放，实现动态追加页面

关键改动说明 #

• 定时触发数据获取：通过setInterval设置每分钟调用一次数据接口，组件卸载时清理定时器，避免内存泄漏
• 数据追加更新：使用函数式状态更新，将新获取的数据追加到现有数组末尾，而非直接替换，确保轮播组件保留当前播放状态
• 简化数据处理：移除原代码中冗余的数组操作，直接生成合并后的KZ和RU数据列表

修改后的完整代码 #

import { useEffect, useState } from 'react';
import AwesomeSlider from 'react-awesome-slider';
import withAutoplay from 'react-awesome-slider/dist/autoplay';
import 'react-awesome-slider/dist/styles.css';

const YourComponent = () => {
  const [dataKZ, setDataKZ] = useState([]);
  const AutoSlider = withAutoplay(AwesomeSlider);

  const fetchData = async () => {
    try {
      const response = await fetch('http://localhost:8000/api/getData', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      });

      const dataJson = await response.json();
      
      // 生成KZ数据（移除ret_ru_status字段）
      const kzData = dataJson.map(item => {
        const { ret_ru_status, ...newItem } = item;
        return newItem;
      });
      
      // 生成RU数据（移除ret_status_kz字段）
      const ruData = dataJson.map(item => {
        const { ret_status_kz, ...newItem } = item;
        return newItem;
      });
      
      // 合并新数据，追加到现有列表
      const newData = [...kzData, ...ruData];
      setDataKZ(prevData => [...prevData, ...newData]);
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  };

  useEffect(() => {
    // 初始化时先获取一次数据
    fetchData();
    
    // 设置每分钟调用一次数据接口（60000毫秒）
    const intervalId = setInterval(fetchData, 60000);
    
    // 组件卸载时清理定时器
    return () => clearInterval(intervalId);
  }, []);

  return (
    <AutoSlider 
      play={true} 
      cancelOnInteraction={false} 
      interval={2000} 
      bullets={false} 
      buttons={false} 
      infinite
    >
      {dataKZ.map((val, idx) => (
        <div key={idx}>
          {/* 这里替换成你的内容渲染逻辑，比如显示val的具体字段 */}
          {JSON.stringify(val)}
        </div>
      ))}
    </AutoSlider>
  );
};

export default YourComponent;

注意事项 #

• 确保react-awesome-slider和react-awesome-slider/dist/autoplay已正确安装并导入样式文件
• 如果接口返回的数据可能重复，建议在追加前添加去重逻辑，避免轮播项重复
• 轮播组件的infinite属性保持开启，确保追加数据后仍能循环播放

内容的提问来源于stack exchange，提问作者Sultan Roziyev