Array.find возвращает TypeError / правильное использование параметров - PullRequest
Новая
       34

Array.find возвращает TypeError / правильное использование параметров

0 голосов
/ 21 октября 2019

Я хочу получить доступ к name из массива данных, но продолжаю получать 'TypeError: Невозможно прочитать свойство' name 'of undefined'. Может кто-то заметить ошибку? <button>{itemName}</button> отображает имя, но я не могу получить к нему доступ с помощью реквизита ... 

export default function Home({ match }) {

  const item = data.find(item => item.name === match.params.itemName);

  return (
     <div>
      <button>{item.name.toUpperCase()}</button>
    </div>
  );
}

export const data = [
  {
    name: "Apple",
    id: 1 
  },
  {
    name: "Banana",
    id: 2 
  },
  {
    name: "Blueberry",
    id: 3 
  }
];

1 Ответ

2 голосов
/ 21 октября 2019

Вы просто захотите разобраться со случаями, когда нет совпадений или, возможно, недействительных данных. 

export default function Home({ match }) {

const item = data
  .filter(item => item && item.name) // only items that have a name
  .find(item => item.name === match.params.itemName);

return item ? (
  <div>
    <button>{item.name.toUpperCase()}</button>
  </div>
) : (
  <div>
    Item not found.
  </div>
);

}

...