Array.find 返回 TypeError / 正确使用参数答案

【问题标题】：Array.find returns TypeError / right use of paramsArray.find 返回 TypeError / 正确使用参数
【发布时间】：2019-10-21 20:14:23
【问题描述】：

我想从数据数组中访问name，但不断收到“TypeError: Cannot read property 'name' of undefined”。有人可以发现错误吗？ <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 
  }
];

【问题讨论】：

data.find(item => item.name === match.params.itemName) 这可能会返回 undefined

标签： javascript reactjs routeparams

【解决方案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>
);

}

【讨论】：