keen-slider與資料取得功能不相容

Question

我想要取得公共資料並使用keen-slider來顯示它們。然而，它似乎工作得不好，特別是當我嘗試添加左右箭頭時。它們不會顯示出來。另一個問題是滑桿在第一次載入時會凍結，只有在調整視窗大小後才會移動。

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

  useEffect(() => {
    fetch("./data.json")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        setData(json);
      });
    setOptions({
      initial: 0,
      slides: {
        origin: "center",
        perView: "3",
        spacing: 25
      },

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

請在[此處](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js)查看完整程式碼。

我按照這些帖子1帖子2中的建議，在獲取數據時更新了useKeenSlider中的選項。這有助於緩解錯誤訊息，但並未完全解決問題。

我還按照這裡的範例添加了箭頭。

歡迎提出任何建議！

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>