Keen-Slider ist nicht mit Datenabruffunktionen kompatibel

Question

Ich möchte öffentliche Daten abrufen und sie mit Keen-Slider anzeigen. Es scheint jedoch nicht sehr gut zu funktionieren, insbesondere wenn ich versuche, Links- und Rechtspfeile hinzuzufügen. Sie werden nicht auftauchen. Ein weiteres Problem besteht darin, dass der Schieberegler beim ersten Laden einfriert und sich erst nach der Größenänderung des Fensters bewegt.

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

  useEffect(() => {
    fetch("./data.json")
      .then((response) => Response.json())
      .then((json) => {
        console.log(json);
        setData(json);
      });
    setOptions({
      Initial: 0,
      Folien: {
        Herkunft: „Mitte“,
        perView: „3“,
        Abstand: 25
      },

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

Den vollständigen Code finden Sie [hier](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js).

Ich habe die Ratschläge in diesen Beiträgen 1 und 2 befolgt und beim Abrufen der Daten die Optionen in useKeenSlider aktualisiert. Dies hilft, die Fehlermeldung zu mildern, löst das Problem jedoch nicht vollständig.

Ich habe auch Pfeile hinzugefügt, die dem Beispiel hier folgen.

Alle Vorschläge sind willkommen!

Answer 1

我认为你的映射数据失败了，所有的结果是：

<div className="keen-slider__slide number-slide1">1</div>
但我们期望的结果是：

<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>