javascript - Array.find 返回 TypeError/正确使用参数

Question

我想访问name从数据数组中但不断收到“类型错误:无法读取未定义的属性“名称””。有人能发现错误吗？ <button>{itemName}</button>显示名称，但我无法使用 props 访问它...

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 
  }
];

Answer 1

您只想处理没有匹配或可能无效数据的情况。

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>
);

}