Javascript 当我使用；“使用回调”；我得到一个打字错误

我有6次使用popover的const体验。我应该给它添加useCallback，但当我去的时候，我得到了一个错误

这是我的组件经验

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

我将这些类添加到popover的paper类中

我不习惯用callback和new来做出反应，所以我迷路了

const experience=useCallback（（img、title、id、popOvertegory、anchorEl、classes、handleClick）=>(

您创建的函数需要向其中传递7项内容。但使用它时，只传递4项内容：

经验（美食家、美食家、美食家、美食家经验）

所以剩下的3个在函数中都是未定义的。在组件顶部定义的anchorEl、Class和handleClick变量在体验中是不可见的，因为这些变量正在被“隐藏”

因此，只需从函数定义中删除最后3个参数，即可停止隐藏变量：

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

但是，我必须指出，useCallback似乎并没有为您做任何事情。useCallback的好处是，您可以让

experience

变量在一个渲染到下一个渲染时是相同的引用，但这似乎不是您需要的功能。您的组件从不尝试比较

experience的引用e

，也不会将

经验

传递给任何其他组件，在该组件中，它可能会在shouldComponentUpdate或React.memo中进行检查

因此，我建议完全删除useCallback：

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

const experience=useCallback（（img、title、id、popOvertegory、anchorEl、classes、handleClick）=>(

您创建的函数需要向其中传递7项内容。但使用它时，只传递4项内容：

经验（美食家、美食家、美食家、美食家经验）

所以剩下的3个在函数中都是未定义的。在组件顶部定义的anchorEl、Class和handleClick变量在体验中是不可见的，因为这些变量正在被“隐藏”

因此，只需从函数定义中删除最后3个参数，即可停止隐藏变量：

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

但是，我必须指出，useCallback似乎并没有为您做任何事情。useCallback的好处是，您可以让

experience

变量在一个渲染到下一个渲染时是相同的引用，但这似乎不是您需要的功能。您的组件从不尝试比较

experience的引用e

，也不会将

经验

传递给任何其他组件，在该组件中，它可能会在shouldComponentUpdate或React.memo中进行检查

因此，我建议完全删除useCallback：

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

---

在这个代码示例中，我能给你的唯一提示是，这个错误不仅仅指那一行。它特别指classes.paper。这个错误告诉你classes变量未定义（aka empty）。因此，classes变量上不存在paper属性，因为classes变量未定义。但在我添加useCallback之前，它工作正常。是否应以某种方式传入它们。useStyles挂钩的作用是什么？我更新了我的问题，以便您可以看到。它添加了我的样式在回调中需要7个参数：img、title、id、PopOvertegory、anchorEl、classes、handleClick。但在新代码示例中只传递4个参数，例如：experience（productos、'productos'、'productos'，productosExperiences）。因此参数anchorEl、classes和handleClick都未定义。我可以通过此代码示例向您提供的唯一提示是，此错误不仅指该行。它特别指classes.paper。该错误告诉您classes变量未定义（也称为空）。因此，classes变量上不存在paper属性，因为classes变量未定义。但在我添加useCallback之前，它工作正常。是否应以某种方式传入它们。useStyles挂钩的作用是什么？我更新了我的问题，以便您可以看到。它添加了我的样式在回调中需要7个参数：img、title、id、PopOvertegory，Ancorel，Class，handleClick。但是在新代码示例中，您只传递了4个参数，例如：experience（productos，'productos'，'productos'，productsExperiences）。因此参数Ancorel，Class和handleClick都是未定义的。