开发者问题收集

React hook useState() 的行为非常奇怪

2020-01-09
938
javascript reactjs react-hooks react-functional-component

我目前正在使用 Swiper 编写一个用于简单幻灯片的 React 应用，一切运行正常。我现在正尝试通过使用 setActiveSlide 函数显示当前幻灯片来改进导航。第一次加载后，它运行正常。单击调用 setActiveSlide 的按钮后，story 对象设置为 null，这会导致在第二次单击上一个或下一个按钮时出现错误（Uncaught TypeError：无法读取 null 的属性“slideNext”）。为什么在调用 setActiveSlide 后 story 对象设置为 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;
2个回答

这是一个函数组件，因此如果您希望变量在多次渲染后仍然有效，则无法像使用 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 的更多信息。

ApplePearPerson
2020-01-09

所以问题是

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

Learner
2020-01-09