当我使用“useCallback”时，出现 TypeError 错误

Question

I have const experience that creates 6 experiences with there popover. I am supposed to add useCallback to it but when I go I get and error.

This is my component experience

import React, { memo, useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
import Button from '@material-ui/core/Button';
import Popover from '@material-ui/core/Popover';
import gastronomia from 'assets/experiences/gastronomia.jpg';
import productos from 'assets/experiences/productos.jpg';
import giftcard from 'assets/experiences/giftcard.jpg';
import diversion from 'assets/experiences/diversion.jpg';
import deporte from 'assets/experiences/deporte.jpg';
import belleza from 'assets/experiences/belleza.jpg';
import gastronomiaExperiences from 'data/gastronomia';
import productosExperiences from 'data/productos';
import giftcardExperiences from 'data/giftcard';
import diversionExperiences from 'data/diversion';
import deporteExperiences from 'data/deporte';
import bellezaExperiences from 'data/belleza';

// Proptypes definitions to the component.
const propTypes = {
  /** Custom root className. */
  className: PropTypes.string,
};

// Default props definitions.
const defaultProps = {
  className: null,
};

// Component's styles
const useStyles = makeStyles(theme => ({
  root: {
    display: 'block',
    margin: '0 auto',
    maxWidth: '50%',
    [theme.breakpoints.down('md')]: {
      maxWidth: '70%',
    },
    [theme.breakpoints.down('sm')]: {
      maxWidth: '100%',
    },
    '& .experiences-column': {
      display: 'inline-block',
      verticalAlign: 'top',
      textAlign: 'center',
      '&.col1': {
        width: '36.31%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '&.col2': {
        width: '63.69%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '& .experience': {
        padding: 2,
        position: 'relative',
        '& img': {
          width: '100%',
          display: 'block',
        },
        '& .experience-title': {
          position: 'absolute',
          bottom: 30,
          left: 0,
          right: 0,
          textAlign: 'center',
        },
      },
    },
  },
  paper: {
    width: '50%',
    left: '25% !important',
    height: '280px',
    '& img': {
      width: '100px',
      padding: '0 10px 0 10px',
    },
  },
  gastronomia: {
    backgroundColor: 'rgba(0,185,208,0.9)',
  },
  giftcard: {
    backgroundColor: 'rgba(221,165,174,0.9)',
  },
  deporte: {
    backgroundColor: 'rgba(189,143,205,0.9)',
  },
  productos: {
    backgroundColor: 'rgba(221,165,174,0.9)',
  },
  diversion: {
    backgroundColor: 'rgba(255,176,10,0.9)',
  },
  belleza: {
    backgroundColor: 'rgba(229,166,187,0.9)',
  },
  '@media screen and (max-width: 1024px)': {
    paper: {
      width: '70%', 
      left: '15% !important',
    },
  },
  '@media screen and (max-width: 480px)': {
   paper: {
    width: '100%',  
    left: '0% !important',  
    height: '350px',
  },
},
}), { name: 'ExperiencesStyle' });

     */const Experiences = memo(
  (props) => {
    const { className } = props;
    const classes = useStyles(props);

    const [anchorEl, setAnchorEl] = useState(null);

    const handleClick = (event) => {
      setAnchorEl(anchorEl ? null : event.currentTarget);
    };

    const handleClose = () => {
      setAnchorEl(null);
    };

    // const open = Boolean(anchorEl);

    const experience = useCallback((img, title, id, popoverCategory, anchorEl, classes, handleClick) => (
      <div
        className="experience"
        aria-describedby={id}
        id={id}
        onClick={handleClick}
        onKeyDown={handleClick}
        role="button"
        tabIndex="0"
      >
        <img
          data-sizes="auto"
          className="lazyload"
          data-src={img}
          alt={title}
        />
        <div className="experience-title">
          <Typography
            color="textSecondary"
            variant="subtitle2"
            className="highlight highlight1"
            display="inline"
          >
            { title }
          </Typography>
        </div>

        <Popover
          id={id}
          open={anchorEl && anchorEl.id === id}
          anchorEl={anchorEl}
          onClose={handleClose}
          classes={{paper: clsx(classes.paper, classes[id])}}
        >
          <div>
            <Button onClickAway={handleClose}>x</Button>
            <div>
              {
              popoverCategory.map(url => (

                <img
                  key={url}
                  data-sizes="auto"
                  className="lazyload"
                  src={url}
                  alt={title}
                />
              ))
            }
            </div>
          </div>
        </Popover>
      </div>
    ), []);

    return (
      <div className={clsx(classes.root, className)}>
        <div className="experiences-column col1">
          {experience(gastronomia, 'GASTRONOMÍA', 'gastronomia', gastronomiaExperiences)}
          {experience(giftcard, 'GIFT CARD', 'giftcard', giftcardExperiences)}
          {experience(deporte, 'DEPORTE', 'deporte', deporteExperiences)}
        </div>
        <div className="experiences-column col2">
          {experience(productos, 'PRODUCTOS', 'productos', productosExperiences)}
          {experience(diversion, 'DIVERSIÓN', 'diversion', diversionExperiences)}
          {experience(belleza, 'BELLEZA', 'belleza', bellezaExperiences)}
        </div>
      </div>
    );
  },
);

and the error is:

TypeError: Cannot read property 'paper' of undefined

referring to this line

classes={{paper: clsx(classes.paper, classes[id])}}

where I add the classes to the paper class of the popover.

I am not used to useCallback and new to react so I am lost.

Answer 1

const experience = useCallback((img, title, id, popoverCategory, anchorEl, classes, handleClick) => (

The function you have created expects 7 things to be passed into it. But when you use it, you only pass in 4:

experience(gastronomia, 'GASTRONOMÍA', 'gastronomia', gastronomiaExperiences)

So the remaining 3 are all undefined inside the function. the anchorEl, classes, and handleClick variables defined at the top of your component are not visible inside experience, because those variable are being "shadowed".

So you could stop shadowing the variables by simply removing the last 3 arguments from your function definition:

const experience = useCallback((img, title, id, popoverCategory) => (

However, i do have to express that useCallback doesn't seem to be doing anything for you. The benefit of useCallback is that you can have the experience variable be the same reference from one render to the next, but that doesn't seem to be a feature that you need. Your component never tries to compare references of experience , nor is experience passed to any other component where it might be checked in a shouldComponentUpdate or React.memo.

So i would recommend deleting the useCallback entirely:

const experience = (image, title, id, popoverCategory) => (