Question

我在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，我是新来的，所以我有点迷路。

Answer 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-如果是这样，则可以以强制条件为真或假但未定义的任何方式对其进行修复，例如{{1 }}或anchorEl ? anchorEl.id === id : false。

Answer 2

React官方文档对于初学者来说是一个很好的知识来源-请利用它（https://reactjs.org/docs/getting-started.html）。

关于错误。

“键”错误：https://reactjs.org/docs/lists-and-keys.html

基本上，每次您通过迭代在某个事物列表上定义组件的子代时，如此处popoverCategory.map(url => (所示，您需要提供一个“键”属性，以帮助React优化渲染。

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

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

与材质ui反应

2 个答案: