如何使useEffect内部的变量从外部访问?

Question

我可以访问isroll变量里面的useEffect?我想在按下按钮时运行滚动。但在我的情况下，它不起作用。我试过做setState，它正在工作，但我在isscroll .on()上遇到了一个新问题，上面写着"无法读取未定义的属性"。我不知道如何解决这个问题。有人能帮我吗?

function Arrangement() {
const ref = useRef(null);
const [prevButton, setPrevButton] = useState(false);
const [nextButton, setNextButton] = useState(true);
useEffect(() => {
const iscroll = new IScroll(ref.current, { // how to export this variable?
keyBindings: true,
scrollX: true,
mouseWheel: true,
click: true
});
iscroll.on("scrollEnd", () => {
if (iscroll.x === 0) {
setPrevButton(false);
} else {
setPrevButton(true);
}
if (iscroll.x === iscroll.maxScrollX) {
setNextButton(false);
} else  {
setNextButton(true);
}
});
return () => {
iscroll.destroy();
}
}, []);
const onPrevButtonHandler = () => {
iscroll.scrollBy(220, 0, 600); // not working
}
const onNextButtonHandler = () => {
iscroll.scrollBy(-220, 0, 600); // not working
}
return (
<div className={classes.Container}>
<button className={clsx(classes.Button, classes.ButtonLeft, {
[classes.Button__active]: prevButton
})} onClick={onPrevButtonHandler} type="button" aria-label="Prev button">
<ChevronLeft />
</button>
<div className={classes.Wrapper} ref={ref}>
<ul>
<li></li>
</ul>
</div>
<button className={clsx(classes.Button, classes.ButtonRight, {
[classes.Button__active]: nextButton
})} onClick={onNextButtonHandler} type="button" aria-label="Next button">
<ChevronRight />
</button>
</div>
);
}
export default Arrangement;

我愿意接受任何建议。

Answer 1

将您的iscroll变量移动到引用或状态

因此，从ref回调本身初始化它:

function Arrangement() {
const iscroll = useRef();
// OR
const [iscroll, setIscroll] = useState();
return (
<div className={classes.Container}>
...
<div
ref={(node) => {
const iscrollInstance = new IScroll(node, {
keyBindings: true,
scrollX: true,
mouseWheel: true,
click: true,
});
iscroll.current = iscrollInstance;
// OR
setIscroll(iscrollInstance);
}}
>
...
</div>
...
</div>
);
}

注意iscroll的使用取决于ref/state:

iscroll.current.on("...") // if its a ref