keen-slider與資料取得功能不相容
P粉208286791
2023-08-15 21:59:38
<p>我想要取得公共資料並使用keen-slider來顯示它們。然而，它似乎工作得不好，特別是當我嘗試添加左右箭頭時。它們不會顯示出來。另一個問題是滑桿在第一次載入時會凍結，只有在調整視窗大小後才會移動。 </p>
<pre class="brush:php;toolbar:false;">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);
}
});
}, []);</pre>
<p>請在[此處](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js)查看完整程式碼。 </p>
<p>我按照這些帖子1帖子2中的建議，在獲取數據時更新了<code>useKeenSlider</code>中的選項。這有助於緩解錯誤訊息，但並未完全解決問題。 </p>
<p>我還按照這裡的範例添加了箭頭。 </p>
<p>歡迎提出任何建議！ </p>
我認為你的映射資料失敗了，所有的結果是：
<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>