React 使用 useParams 获取的参数值无法匹配接口查询数据问题

问题原因 #

useParams() 返回的所有路由参数均为字符串类型，你接口返回的element.id是数字类型，使用严格相等运算符===判断时会同时校验值和类型，因此数字2 === 字符串"2"的结果为false，才会出现打印看起来值相同但匹配失败的情况。

解决方案 #

• 方案1（最推荐，类型逻辑清晰无隐式转换）：显式将路由参数转为数字后再比较
  把匹配逻辑修改为：

  return element.id === Number(itemId)
  

• 方案2：将接口返回的id转为字符串后比较
  匹配逻辑修改为：

  return String(element.id) === itemId
  

不推荐使用非严格相等==实现匹配，虽然也能生效，但隐式类型转换容易带来其他不可预期的问题。

额外优化建议 #

你当前的useEffect依赖数组为空，仅会在组件首次挂载时执行请求。如果后续路由的itemId参数发生变化，组件不会重新拉取数据匹配，建议把itemId添加到useEffect的依赖数组中：

useEffect(() => {
    promiseDelay()
        .then((response) => response.json())
        .then((data) => {
            const aux = data.find((element) => {
                return element.id === Number(itemId);
            });
            setDataToShow(aux);
        });
}, [itemId]);

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