현재 간단한 슬라이드 쇼를 위해 Swiper를 사용하여 반응 앱을 작성 중이며 모든 것이 잘 작동합니다. 이제 setActiveSlide 함수로 현재 슬라이드를 표시하여 탐색을 개선하려고합니다. 첫 번째로드 후에는 정상적으로 작동합니다. setActiveSlide를 호출하는 버튼을 클릭 한 후 스토리 객체가 null로 설정되어 이전 또는 다음 버튼을 두 번 클릭하면 오류 (Uncaught TypeError : null의 'slideNext'속성을 읽을 수 없음)가 발생합니다. setActiveSlide를 호출 한 후 스토리 개체가 null로 설정되는 이유는 무엇입니까? 도와주세요
다음은 앱의 단순화 된 버전입니다.
import React, { useState, useEffect, useRef } from "react";
import Swiper from "swiper";
const Slideshow = props => {
var swiper = useRef();
var story = null;
const [activeSlide, setActiveSlide] = useState("");
useEffect(() => {
story = new Swiper(swiper.current, {
loop: false,
speed: 1100
});
}, []);
const prevSlide = () => {
setActiveSlide("PREV");
story.slidePrev();
};
const nextSlide = () => {
setActiveSlide("NEXT");
story.slideNext();
};
return (
<div className="container-story" ref={swiper}>
<div className="container-story-wrapper swiper-wrapper">
{props.children}
</div>
<div className="navigation">
<button onClick={prevSlide}> Previous </button>
<button onClick={nextSlide}> Next </button>
{activeSlide}
</div>
<div className="lightbox-container"></div>
</div>
);
};
export default Slideshow;
이것은 함수 구성 요소이므로 변수가 여러 렌더링을 통해 유지되도록하려면에서와 같이 로컬로 선언 할 수 없습니다 var story = null. 첫 번째 렌더링에는 설정이 있지만 구성 요소가 다시 렌더링되면 다시 null로 설정합니다.
이를 처리하는 적절한 방법은 Reacts useRef후크 를 사용하는 것 입니다. 이것은 여러 렌더링을 통해 변수가 지속되도록하는 방법입니다.
선언하려면 : const _story = useRef(null);
_story변수 를 읽고 쓰려면 에 액세스해야합니다 _story.current. 따라서 useEffect마운트 에서 대신 이것을 사용해야합니다.
_story.current = new Swiper(swiper.current, {
loop: false,
speed: 1100
});
그리고 핸들러에서 : _story.current.slideNext();
useRef 여기에서 자세한 내용을 읽을 수 있습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다