道具验证警告中缺少反应"x" (eslint)

Question

我尝试了许多组合，但无法在React应用程序中解决以下错误:

在道具验证中缺少'roles'

以下是相关代码部分:

const ProRoute = ({ roles = [] }) => {
const userRoles = service.getCurrentUser()?.roles;
const isAuthorized = !roles.length || roles.some((r) => userRoles.includes(r));
// ...
};
export default ProRoute;

和pass角色如下所示:

<Route element={<ProRoute roles={['ROLE_ADMIN']} />}>
<Route index element={<Student />} />
</Route>

那么，问题的原因是什么呢?我应该把角色用大括号或括号括起来吗?

Answer 1

就像我在评论中提到的那样。在使用库之前，你需要先学习如何使用它。

出现上面的错误是因为在你的eslintrc文件中必须有一个名为react/prop-types的规则被启用。这基本上告诉eslint检查props和它们的类型。这可以确保你的组件总是收到预期的道具。

要修复上述错误，只需在propTypes对象中添加角色道具

import PropTypes from 'prop-types';
const ProRoute = ({ roles = [] }) => {
const userRoles = service.getCurrentUser()?.roles;
const isAuthorized = !roles.length || roles.some((r) => userRoles.includes(r));
// ...
};
// Prop validation
ProRoute.propTypes = {
roles: PropTypes.array
};
export default ProRoute;