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>