ошибка в popover сделана в реакции с пользовательским интерфейсом

Question

У меня есть компонент, выполненный в React, который имеет 6 опытов, и каждый опыт создает всплывающее окно с массивом изображений. Я делаю поповер, используя материал пользовательского интерфейса, поповер работает, но у меня есть несколько ошибок в консоли, и я не знаю, как их исправить.

это мой компонент

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 - если это так, вы можете исправить это любым способом, который приводит к тому, что результат условия будет истинным или ложным, но не неопределенным, например anchorEl ? anchorEl.id === id : false или anchorEl && anchorEl.id === id || false .

Answer 2

Официальная документация React является отличным источником знаний для начинающих - пожалуйста, используйте его (https://reactjs.org/docs/getting-started.html).

Что касается ошибок.

' key 'error: https://reactjs.org/docs/lists-and-keys.html

По сути, каждый раз, когда вы определяете дочерние элементы компонента с помощью итерации по списку чего-либо, как вы делаете здесь: popoverCategory.map(url => (, вам необходимо указать Атрибут 'key', который поможет React оптимизировать рендеринг.

Ошибка 'open prop': https://material-ui.com/api/popper/

Как видите, "open" является обязательным свойством Таким образом, компонент Popper ожидает, что вы что-то передадите в него. Из-за способа составления вашего условия: anchorEl && anchorEl.id === id, ваше свойство 'open' заполняется значением null, потому что если anchorEl равно нулю, то результат оператора && также равен нулю. И ваш anchorEl имеет значение null, потому что вы устанавливаете его в null, когда инициализируете его как часть состояния вашего компонента.