如何将 useParams 钩子作为字符串获取

Question

我有一个使用 productId.

链接到产品详细信息页面的搜索页面

在产品详情页面，我可以使用：

const productId = useParams();

然后我必须将它与产品列表交叉，以获得正确的产品。为此，我使用：

const productSelected = listOfProducts.find(e => e.productId === productId);

问题是我从 useParams() 得到的 productId 作为一个对象出现。即使此对象包含正确的 productId，当我在列表中搜索时它也会失败，因为 e.productId 是一个字符串。

而且我无法使用双 ==，因为 JSLint 不允许。我看到一些帖子说使用 JSON.Stringfy，但它会将整个对象转换为字符串，而不仅仅是 productId.

的值

Answer 1

this objects holds the correct productId

听起来你只需要解构它？:

const { productId } = useParams();

这将声明 productId 变量的值来自对象的 productId 属性，而不是整个对象本身。

还值得注意的是，默认情况下，URL 参数是字符串。如果您希望它是一个数字，那么您可以将其转换为数字。也许是这样的：

const { productIdParam } = useParams();
const productId = parseInt(productIdParam);

或者，如果您使用的是 TypeScript，则可以在调用 useParams 时指明类型。例如：

const { productId } = useParams<{ productId: Number }>();

在这种情况下 productId 将是 Number。

根据下面的评论，在使用 TypeScript 时注意有关类型的一些事情也很重要。它只在 design-time 处强制执行它们，而不是 run-time。因此，例如，您可以声明一个接口，使其具有属性即 Number，然后在从某处获取数据时使用该接口。但是在运行时，如果实际的属性值是 string 那么 === 将不起作用，因为类型是错误的。尽管 TypeScript 说它们应该是正确的，但在运行时它仍然是 JavaScript 并没有强制执行。

如何将 useParams 钩子作为字符串获取

How to get useParams hook as string

reactjs

typescript

react-hooks

typeerror