javascript - 与 Material ui react 后，弹出窗口发生错误

我在React中完成了一个组件，该组件有6个经验，每个经验都会创建一个带有图像数组的弹出窗口。我使用材质ui制作了弹出式窗口，该弹出式窗口可以工作，但是控制台中存在几个错误，并且不知道如何解决。

这是我的组成部分

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

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

    const handleClick = (event) => {
      setAnchorEl(event.currentTarget);
    };

    const open = Boolean(anchorEl);

    const experience = (img, title, category, id, popoverCategory, open) => (
      <div
        className="experience"
        aria-describedby={id}
        id={id}
        onClick={handleClick}
      >
        <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>

        <Popper
          id={id}
          open={anchorEl && anchorEl.id === id}
          anchorEl={anchorEl}
        >
          <div className={classes.paper}>
            {
              popoverCategory.map(url => (
                <img
                  data-sizes="auto"
                  className="lazyload"
                  data-src={popoverCategory}
                  alt="Puntospoint"
                />
              ))
            }
          </div>
        </Popper>
      </div>

    );


    return (

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

    );
  },
);

这些是错误



这是我第一次使用Material ui，而且我是新手，所以我有点迷路。

最佳答案

有关唯一键的第一个警告通常是由于在某处使用Array.map而不是为生成的元素提供键而引起的。您的情况在这里：

<div className={classes.paper}>
  {
    popoverCategory.map(url => (
      <img
        data-sizes="auto"
        className="lazyload"
        data-src={popoverCategory}
        alt="Puntospoint"
      />
    ))
  }
</div>

因此，您要创建一堆没有键的img标签。在您的情况下执行此操作可能很好，但是最佳实践是提供键，以便在删除，添加或重新排序元素时不会出现意外行为。解决方法很简单：

<div className={classes.paper}>
  {
    popoverCategory.map((url, key) => (
      <img
        data-sizes="auto"
        className="lazyload"
        data-src={popoverCategory}
        alt="Puntospoint"
        {...key}
      />
    ))
  }
</div>

第二个问题在这里：

 <Popper
   id={id}
   open={anchorEl && anchorEl.id === id}
   anchorEl={anchorEl}
  >

如果未定义anchorEl，则您尝试将undefined分配给open，这是在某处定义的propType不允许的。看起来它应该仅是true或false-如果是这样，则可以以强制条件为true或false但不是未定义的任何方式修复它，例如anchorEl ? anchorEl.id === id : false或anchorEl && anchorEl.id === id || false 。

关于javascript - 与 Material ui react 后，弹出窗口发生错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59684782/