无法找到哪个孩子缺少关键道具的反应错误 [英] Cant find react error which child is missing key prop

问题描述

我得到了非常普遍的警告:数组或迭代器中的每个孩子都应该有一个唯一的键"道具.这通常很容易解决，但在这种情况下，我几乎无法解决找出问题的根源.

I get the very common Warning: Each child in an array or iterator should have a unique "key" prop. This is usually very easy to resolve but in this case its just impossible to me to figure out where the issue is created.

我的堆栈跟踪:

 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组件

withTranslation Component

export function withTranslation(CMP) {
    var hoc = class extends React.Component {
        render() {
            return <CMP {...this.props} translate={translate} />
        }
    };
    return hoc;
}

ConnectedProtectedRoutes

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;
            }}
        />
    );
};

堆栈继续进行，但是我猜问题出在那儿.有任何线索吗?

And the stack goes on but im guessing the issue is somewhere in there. Any clues?

推荐答案

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

In your ProtectedRoutes component you are defining an array and using it somewhere else. Hence, each array needs a key, this is why you are getting warning. So, handle the key for this array.

这篇关于无法找到哪个孩子缺少关键道具的反应错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！