javascript - React hook useState() 的行为真的很奇怪

Question

我目前正在使用 Swiper 编写一个 React 应用程序来进行简单的幻灯片放映，一切正常。我现在尝试通过使用 setActiveSlide 函数显示当前幻灯片来改进导航。第一次加载后，效果很好。单击调用 setActiveSlide 的按钮后，故事对象将设置为 null，这会在您第二次单击“上一个”或“下一个”按钮时导致错误(未捕获类型错误:无法读取 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; 

Answer 1

这是一个函数组件，因此如果您希望一个变量在多个渲染中持续存在，那么您不能像使用 varstory = null 那样在本地声明它。您的第一次渲染将设置它，但是当组件重新渲染时，您将其设置回 null。

处理这个问题的正确方法是使用 Reacts useRef 钩子(Hook)。这是一种让变量在多次渲染中保持不变的方法。

声明它:const _story = useRef(null);

要读取/写入 _story 变量，您需要访问 _story.current。因此，在您的 useEffect 挂载中，您应该使用它:

_story.current = new Swiper(swiper.current, {
    loop: false,
    speed: 1100
});

在你的处理程序中:_story.current.slideNext();

您可以阅读有关 useRef here 的更多信息.