Reactjs 找不到缺少关键道具的子项的错误

Reactjs 找不到缺少关键道具的子项的错误,reactjs,jsx,Reactjs,Jsx,我得到一个非常常见的警告:数组或迭代器中的每个子级都应该有一个唯一的“键”属性。这通常很容易解决,但在这种情况下,我不可能找出问题是在哪里产生的 我的堆栈跟踪: in hoc (created by Connect(hoc)) in Connect(hoc) (at withTranslation.js:7) in hoc (at ConnectedProtectedRoutes.js:26) in Route (at ConnectedProtectedRoutes.

我得到一个非常常见的警告:数组或迭代器中的每个子级都应该有一个唯一的“键”属性。这通常很容易解决,但在这种情况下,我不可能找出问题是在哪里产生的

我的堆栈跟踪:

 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))
带翻译组件

export function withTranslation(CMP) {
    var hoc = class extends React.Component {
        render() {
            return <CMP {...this.props} translate={translate} />
        }
    };
    return hoc;
}
带翻译的导出功能(CMP){
var hoc=类扩展了React.Component{
render(){
返回
}
};
返回hoc;
}
连接的受保护路由

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;
            }}
        />
    );
};
const ProtectedRoutes=({token,authority,location})=>{
变量a=[
createRouteWithRequirements(,“/”,[],{token,authority},true),
createRouteWithRequirements(,“/login”,[],{token,authority}),
createRouteWithRequirements(,“/register”,[],{token,authority})
]
归还
};
const createRouteWithRequirements=(组件、url、需求、注入、精确)=>{
返回(
路由中(在ConnectedProtectedRoutes.js:44处)
精确={!!精确}
键={url}
路径={url}
render={()=>{
if(要求.包括(“令牌”)&&!注入.令牌){
返回
}
返回组件;
}}
/>
);
};

这堆东西还在继续,但我猜问题就在那里。有什么线索吗?

在ProtectedRoutes组件中,您正在定义一个数组并在其他地方使用它。因此,每个数组都需要一个键,这就是为什么会收到警告。所以,处理这个数组的键。

lemme try,我确信在定义这样的数组时,索引被用作键。BRB我将得到错误,如编辑中所示更改,我很确定我过去也尝试过。事实上,我可以看到我将整个url作为一个键传递(我甚至忘记了我这样做是为了避免这个问题)我不是一个专业人士,但我非常确定键不会自动处理数组:)我确信这会解决问题。我现在在你的代码中看不到任何导致错误的原因。我知道,对吗?这在我的控制台中已经出现太长时间了,您可以想象OCD触发器正在呈现父组件中可能具有相同键的任何其他内容(例如
key=“1”
)?如果同时挂载了两个单独的列表,并且某些列表元素具有相同的键,则会显示警告。