我得到了非常常见的警告:数组或迭代器中的每个子节点都应该有一个唯一的"键"支持。这通常很容易解决,但在这种情况下,我无法弄清楚问题的创建地点。
我的堆栈跟踪:
in hoc (created by Connect(hoc))
in Connect(hoc) (at withTranslation.js:7)
in hoc (at ConnectedProtectedRoutes.js:26)
in Route (at ConnectedProtectedRoutes.js:44)
in ProtectedRoutes (created by Connect(ProtectedRoutes))
withTranslation Component
export function withTranslation(CMP) {
var hoc = class extends React.Component {
render() {
return <CMP {...this.props} translate={translate} />
}
};
return hoc;
}
ConnectedProtectedRoutes
const ProtectedRoutes = ({ token, authority, location }) => {
var a = [
createRouteWithRequirements(<Login key="1"/>, "/", [], { token, authority }, true),
createRouteWithRequirements(<Login key="2"/>, "/login", [], { token, authority }),
createRouteWithRequirements(<Register key="3"/>, "/register", [], { token, authority })
]
return a
};
const createRouteWithRequirements = (component, url, requirements, injections, exact) => {
return (
<Route //this is -> in Route (at ConnectedProtectedRoutes.js:44)
exact={!!exact}
key={url}
path={url}
render={() => {
if (requirements.includes("token") && !injections.token) {
return <Redirect to="/login" />
}
return component;
}}
/>
);
};
堆栈还在继续,但我猜这个问题就在那里。有线索吗?
答案 0 :(得分:-1)
在您的ProtectedRoutes组件中,您正在定义一个数组并在其他地方使用它。因此,每个阵列都需要一个键,这就是你收到警告的原因。所以,处理这个数组的密钥。