React不能使用useParams值

Question

所以我的代码工作没有问题，直到我添加了useParams

[...]
const promiseDelay = () => {
const E_COMMERCE_API = "https://mocki.io/v1/027ebfda-9bd8-4b53-ae33-ab41586d773a";
return new Promise((resolve, reject) => {
setTimeout(() => resolve(fetch(E_COMMERCE_API)), 1000);
});
};
export default function ItemDetailContainer() {
const { itemId } = useParams();
const [dataToShow, setDataToShow] = useState([]);
useEffect(() => {
promiseDelay()
.then((response) => response.json())
.then((data) => {
const aux = data.find((element) => {
console.log(itemId); //<--- 2
// return element.id === itemId; <--- if i uncomment, i get no data
return element.id === 2; // with this line, everything works just fine
});
setDataToShow(aux);
});
}, []);
[...]
}

显然，即使itemId是2，它也不一样，会破坏一切。

Answer 1

这可能是因为参数从URL解析时是字符串。useParams钩子不知道将其解析为数字。

所以element.id === Number(itemId)应该修复它。