React：URL 配置文件 ID 不匹配 (match.params.id)

所以每当我点击“查看个人资料”链接时

 <Link to={`/profile/${_id}`} className="btn btn-primary">
                View Profile
 </Link>

它在 URL 中显示了良好配置文件的用户 ID。

但每当我单击它以将其与此按钮匹配时，我都会收到错误。

const Profile = ({ getProfileById, match }) => {
useEffect(() => {
    getProfileById(match.params.id);
}, [getProfileById]);

return <div>test</div>;

};

我进入我的控制台

React Hook useEffect has a missing dependency: 'match.params.id'. Either include it or remove the dependency array

这就是我的应用程序 Js 中的内容。

   <Route
         exact
         path="/profile/:id"
         component={Profile}
     />

我认为它与我单击的按钮的 URL 不匹配。

在 Redux Devtools 中，它只返回配置文件错误。

在这种情况下，产生警告的 linter 规则：React Hook useEffect has a missing dependency: 'match.params.id'. Either include it or remove the dependency array，告诉你你还有另一种依赖。使用这个代替：

const Profile = ({ getProfileById, match }) => {
useEffect(() => {
    getProfileById(match.params.id);
}, [getProfileById, match.params.id]);

return <div>test</div>;

linter 不会探索整个应用程序来确定在何处以及如何进行match用来。它也不知道你将来打算如何使用它，因此，它要求你将它与依赖项数组一起放入getProfileId.

如果你已经导入了getProfileId或者将其放置在组件外部而不是将其作为道具传递下来，您可以安全地删除getProfileId来自依赖关系。所有这些都表明，弄清楚数组内部的内容需要一些额外的理解。丹·阿布拉莫夫写了一篇伟大的文章博客文章 https://overreacted.io/writing-resilient-components/这帮助我思考何时以及如何使用依赖项数组。这post https://reacttraining.com/blog/when-to-use-functions-in-hooks-dependency-array/如果您发现 Dan 的帖子有点过于宽泛，那么这可能是一个很好的起点，因为它涉及编写弹性组件的更通用的概念。