与材料 ui 反应完成的弹出框错误答案

【问题标题】：error in popover done in react with material ui与材料 ui 反应完成的弹出框错误
【发布时间】：2020-01-10 15:41:43
【问题描述】：

我有一个在 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>

    );
  },
);

这些是错误

这是我第一次使用材质ui，我是新手，所以我有点迷茫。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

关于唯一键的第一个警告通常是由于在某处使用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 - 如果是这样，您可以以任何方式修复它，强制条件结果为真或假但不是未定义，例如 anchorEl ? anchorEl.id === id : false 或 anchorEl && anchorEl.id === id || false .

【讨论】：

我什么时候使用anchorEl？ anchorEl.id === id : false 或 anchorEl && anchorEl.id === id ||错误的。在终端我得到第 130:48 行：'&&' 和 '||' 的意外混合

【解决方案2】：

React 官方文档是初学者的重要知识来源 - 请利用它 (https://reactjs.org/docs/getting-started.html)。

至于错误。

'key'错误：https://reactjs.org/docs/lists-and-keys.html

基本上，每次通过迭代列表定义组件的子级时，就像您在此处所做的那样：popoverCategory.map(url => (，您需要提供一个有助于 React 优化渲染的“key”属性。

“打开道具”错误：https://material-ui.com/api/popper/

正如你所见，'open' 是一个必需的属性，所以 Popper 组件希望你在其中传递一些东西。由于您构成条件的方式：anchorEl && anchorEl.id === id，您的“打开”属性填充为 null，因为如果 anchorEl 为 null，则 && 运算符的结果也为 null。而且您的 anchorEl 为 null，因为您在将其初始化为组件状态的一部分时将其设置为 null。

【讨论】：