React中Array.find()返回undefined的问题排查求助

问题原因 #

useParams()获取的URL参数itemId是字符串类型，而你tempItems数组中元素的id是数字类型。JavaScript的===是严格相等运算符，会同时校验值和类型，因此1 === "1"的结果为false，导致Array.find()无法匹配到对应元素，返回undefined。

你可以在控制台添加日志验证类型：

console.log(typeof itemId, typeof items[0].id); // 会输出 string number

解决方法 #

有两种可行的修复方式，选一种适合你的场景即可：

方式一：将URL参数转为数字类型 #

在比较前把itemId转换成数字，再进行匹配：

const Item = ({items}) => {
  let {itemId} = useParams();
  // 转换为数字类型
  const numericItemId = Number(itemId);
  const item = items.find((i) => i.id === numericItemId);
  // ... 后续代码不变
};

或者用parseInt明确指定进制：

const numericItemId = parseInt(itemId, 10);

方式二：将数组中的id改为字符串类型 #

如果业务场景允许，直接把数据源里的id改成字符串类型，保持和URL参数类型一致：

const tempItems = [
  {
    id: "1" // 从数字1改为字符串"1"
    ...
  },
  ...
];

内容的提问来源于stack exchange，提问作者OldLavyGenes474