时间戳

首页 > 解决方案 > 反应中使用useCallback的无效钩子调用

reactjs - 反应中使用useCallback的无效钩子调用

问题描述

我有一个问题，我试图在一个类中转换这个例子中的这个函数： https ://codesandbox.io/s/5vn3lvz2n4

但是，我得到了一个错误。这是代码：

import React, { Component, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";

class Gallerie extends Component {

  constructor(props){
    super(props)

    this.state = {
      currentImage: 0,
      setCurrentImage: 0,
      viewerIsOpen: false,
      setViewerIsOpen: false,
    }   
}

  render(){
    const openLightbox = useCallback((event, { photo, index }) => {
      this.state.setCurrentImage(index);
      this.state.setViewerIsOpen(true);
    }, []);

    const closeLightbox = () => {
      this.state.setCurrentImage(0);
      this.state.setViewerIsOpen(false);
    };

    return (
      <div>
        <Gallery photos={this.props.photos} onClick={() => openLightbox} />
        <ModalGateway>
          {this.state.viewerIsOpen ? (
            <Modal onClose={() =>closeLightbox}>
              <Carousel
                currentIndex={this.state.currentImage}
                views={this.props.photos.map(x => ({
                  ...x,
                  srcset: x.srcSet,
                  caption: x.title
                }))}
              />
            </Modal>
          ) : null}
        </ModalGateway>
      </div>
    );
  }
}

export default Gallerie;

这是问题和我得到的：

在此处输入图像描述

我不知道 useCallBack 是做什么的。如果我只是复制/粘贴示例，它就可以工作。问题是变量“photos”被用作道具，因为每个用户都会有所不同。所以我需要它进入其他组件。如果我使用像示例这样的函数，我不能使用道具......

谢谢你的帮助。

标签： reactjs

解决方案

您正在使用hookinside a classbased component。首先将其转换为功能组件

const Gallerie = props =>{
    const [state, setState] = useState({
        currentImage: 0,
        setCurrentImage: 0,
        viewerIsOpen: false,
        setViewerIsOpen: false,
    })

    const openLightbox = useCallback((event, { photo, index }) => {
        setState({...state, setCurrentImage: index, setViewerIsOpen: true});
    }, []);

    const closeLightbox = () => {
        setState({...state, setCurrentImage: 0,setViewerIsOpen: false })
    };

    return (
        <div>
          <Gallery photos={props.photos} onClick={() => openLightbox} />
          <ModalGateway>
            {state.viewerIsOpen ? (
              <Modal onClose={() =>closeLightbox}>
                <Carousel
                  currentIndex={state.currentImage}
                  views={props.photos.map(x => ({
                    ...x,
                    srcset: x.srcSet,
                    caption: x.title
                  }))}
                />
              </Modal>
            ) : null}
          </ModalGateway>
        </div>
      );
}

推荐阅读