keen-slider tidak serasi dengan fungsi pengambilan data

Question

Saya mahu mendapatkan data awam dan memaparkannya menggunakan keen-slider. Walau bagaimanapun, ia nampaknya tidak berfungsi dengan baik, terutamanya apabila saya cuba menambah anak panah kiri dan kanan. Mereka tidak akan muncul. Masalah lain ialah gelangsar membeku apabila mula-mula dimuatkan dan hanya bergerak selepas mengubah saiz tetingkap.

const [data, setData] = useState([]);
  const [options, setOptions] = useState({});
  const [currentSlide, setCurrentSlide] = useState(0);
  const [dimuatkan, setLoaded] = useState(false);
  const [sliderRef, instanceRef] = useKeenSlider(options);

  useEffect(() => {
    fetch("./data.json")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        setData(json);
      });
    setOptions({
      permulaan: 0,
      slaid: {
        asal: "pusat",
        perView: "3",
        jarak: 25
      },

      slideChanged(slider) {
        setCurrentSlide(slider.track.details.rel);
      },
      dicipta() {
        setLoaded(benar);
      }
    });
  }, []);

Lihat kod penuh [di sini](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js).

Saya mengikuti nasihat dalam siaran 1 siaran 2 ini dan mengemas kini pilihan dalam useKeenSlider Ini membantu mengurangkan mesej ralat, tetapi tidak menyelesaikan masalah sepenuhnya.

Saya turut menambah anak panah mengikut contoh di sini.

Sebarang cadangan dialu-alukan!

Answer 1

Saya rasa data pemetaan anda gagal, semua keputusannya ialah:

<div className="keen-slider__slide number-slide1">1</div>
Tetapi hasil yang kami harapkan ialah:

<div className="keen-slider__slide number-slide1">1</div>
      <div className="keen-slider__slide number-slide2">2</div>
      <div className="keen-slider__slide number-slide3">3</div>
      <div className="keen-slider__slide number-slide4">4</div>
      <div className="keen-slider__slide number-slide5">5</div>
      <div className="keen-slider__slide number-slide6">6</div>