无法解析符号 useParams

Posted 2023-02-21

【中文标题】无法解析符号 useParams

【英文标题】：Cannot resolve symbol useParams

【发布时间】：2020-06-10 22:27:02

【问题描述】：

我正在创建一个使用 WebStorm 做出反应的应用程序。我正在尝试使用 react-router-dom useParams。我有 react-router-dom 5.1.2 作为依赖项，但 useParams 在 import 语句中显示为灰色。当我将鼠标悬停在 useParams 上时，它显示“”。我也在尝试导入 Switch，但我收到了类似的消息“无法解析符号 Switch”。更不寻常的是 Link 是从 react-router-dom 导入的。

【问题讨论】：

只是好奇，它还能编译运行吗？只是智能感知没有捡起来吗？

@AlexK 它运行但当我单击任何产品链接时崩溃。此外，当控制台记录 thisProduct 时，它会返回 undefined

这很奇怪，这些图像中没有任何突出之处，你有可以从代码沙箱或类似的东西中提供的复制品吗？

@user3574939 您的 .find() 失败了，因为路由参数中的 productId 是一个字符串，其中您的数据中的 id 是数字。您需要将 productId 转换为数字（有多种方法可以做到这一点，我使用了+），我在这里分叉并更正了您的沙箱：codesandbox.io/s/heuristic-elbakyan-k07qc

每当您使用.find() 时，最好处理它不返回值的情况，因为它总是可能返回undefined 以防止整个应用程序崩溃。跨度>

【参考方案1】：

除了添加适当的库之外，您还需要为您的项目添加适当的范围。

下载所需的库。 仔细检查它们是否在适当的范围内。

【讨论】：

这有什么帮助？你建议我把它改成什么？我不是很好，默认情况下是怎样的？

在我的情况下，安装库后它不是项目范围的一部分，所以我需要手动添加 t，很可能它应该自动添加，只是想指出额外的步骤，这可能是如果有人遇到类似问题，请采取。

【参考方案2】：

我在 2020.1 中遇到了同样的问题。我没有安装 TypeScript 定义的 Alt+Enter 选项。我必须去 File > Settings > Languages & Frameworks > JavaScript > Libraries 和 Download... @types/react-router 使警告消失。如果不是因为 lena 的回答，我永远不会想到下载 react-router 类型。

该列表有点令人生畏，因为乍一看似乎您必须滚动浏览它，但是，如果您单击其中一个条目并开始输入，则应该会出现一个搜索框。

【参考方案3】：

node_modules/react-router-dom/esm/react-router-dom.js 从react-router 重新导出Switch、Root、useParams。但后者未在您的package.json 中列为直接依赖项，因此被排除在索引之外。 您可以通过从node_modules/react-router 右键菜单中选择 Mark Directory as/Not exclude 来取消排除它：

但我强烈建议为包安装 Typescript 存根以获得更好的完成/类型提示：将光标放在导入语句中的"react-router-dom"，点击Alt+Enter，选择安装 TypeScript 定义以获得更好的类型信息

见https://www.jetbrains.com/help/webstorm/2019.3/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files

【讨论】：

“安装 TypeScript 定义以获得更好的类型信息”究竟是做什么的？因为我没有看到 package.json 中添加了任何内容。

它不应该在那里添加任何东西； d.ts 文件下载到 IDE 配置文件夹并作为库添加到您的项目中，仅适用于 IDE。如果您希望在项目中下载类型并添加到 package.json，请在终端中运行 npm i @types/react-router-dom 命令