React中具有useCallback的無效鈎子調用

Question

我有一個問題，我嘗試通過以下示例在一個類中轉換此函數： 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”用作道具，因為每個用戶它都會不同。 因此，我需要將其用於其他組件。 如果我使用類似示例的函數，則無法使用道具...

謝謝你的幫助。

Answer 1

您正在基於class的component使用hook 。 首先將其轉換為功能組件

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>
      );
}