Блог

Я получаю сообщение об ошибке: не удается прочитать свойство ‘map’ undefined, но когда я делаю консольный журнал элементов (который является массивом, используемым для сопоставления), получается нормально, что означает, что он был правильно передан через props, но внутри рендеринга он не может прочитать массив элементов для сопоставленияэто

 import React from 'react';

const ListGroup = (props) => {
  const { items, onItemSelect, currentGenre } = props;

  console.log(items);
  return (
    <ul className="list-group">
      {items.map((item) => (
        <li
          onClick={() => onItemSelect(item)}
          key={item.id}
          className={item === currentGenre ? 'list-group-item active' : 'list-group-item'}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
};

export default ListGroup;  

Может кто-нибудь, пожалуйста, помочь мне с этим

Сначала вам нужно убедиться, что вы передаете правильные значения в качестве реквизитов этого компонента. В вашем случае items не определено, поэтому результатом является ошибка. Чтобы быть устойчивым к ошибкам такого типа, у вас может быть такое условие:

 return (
  <ul className="list-group">
    {items amp;amp; items.length
      ? items.map((item) => (
          <li
            onClick={() => onItemSelect(item)}
            key={item.id}
            className={item === currentGenre ? 'list-group-item active' : 'list-group-item'}
          >
            {item.name}
          </li>
        ))
      : null}
  </ul>
);
  

Вместо null вы возвращаете любой компонент по своему усмотрению.