反应钩子useState（）的真正奇怪的行为

Posted 2023-02-22

【中文标题】反应钩子useState（）的真正奇怪的行为

【英文标题】：Really weird behavior of the react hook useState()

【发布时间】：2020-04-26 21:04:39

【问题描述】：

我目前正在使用 Swiper 编写一个 React 应用程序，用于简单的幻灯片放映，一切正常。我现在正在尝试通过使用 setActiveSlide 函数显示当前幻灯片来改进导航。第一次加载后，它工作正常。单击调用 setActiveSlide 的按钮后，故事对象设置为 null，这会在您再次单击上一个或下一个按钮时导致错误（未捕获的类型错误：无法读取属性 'slideNext' of null）。为什么调用 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; 

【问题讨论】：

当你调用 setActiveSlide("NEXT").状态发生变化，重新渲染发生，变量 var store = null 再次初始化。这就是为什么。

@Gunther，请检查答案

【参考方案1】：

这是一个函数组件，因此如果您希望一个变量在多次渲染中保持不变，那么您不能像使用 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();

你可以阅读更多关于useRefhere的信息。

【参考方案2】：

所以问题是

从 React Hook useEffect 内部对 'story' 变量的分配将在每次渲染后丢失。要随着时间的推移保留该值，请将其存储在 useRef Hook 中并将可变值保留在“.current”属性中。否则，您可以直接在 useEffect 中移动此变量。

所以你需要更新如下

import React,  useState, useEffect, useRef  from "react";
import "./styles.css";

import Swiper from "swiper";

const Slideshow = props => 
  var swiper = useRef();
  var story = useRef(null);
  const [activeSlide, setActiveSlide] = useState("");

  useEffect(() => 
    story.current = new Swiper(swiper.current, 
      loop: false,
      speed: 1100
    );
  , []);

  const prevSlide = () => 
    setActiveSlide("PREV");
    story.current.slidePrev();
  ;

  const nextSlide = () => 
    setActiveSlide("NEXT");
    story.current.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>
  );
;
export default Slideshow;

工作codesandbox