动态生成的react引导程序组件缺少密钥属性

Missing key property with dynamically generated react-bootstrap components

本文关键字:密钥 属性 组件 引导程序 react 动态      更新时间:2023-11-05

我遇到了一些可疑行为,我不确定错误是在我这边,还是这是一个反应引导程序错误。

当我动态创建导航时,我会收到以下错误

main.js:2331 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Header`. See ... for more information

如果我正确定义了key,这个错误就会消失,但AFAIK不应该需要,因为eventKey应该负责这个

代码示例:

render() {
    let routes =[
        {
            name : 'Dashboard',
            path : '/',
        },
        {
            name : 'Navigation Manager Tool',
            path : '/tools/navigation-manager',
        }
    ];
    return (
        <Navbar inverse className="widget-header">
            <Navbar.Header>
                <Nav activeKey={this.props.active.path}>
                    {
                        routes.map((route) => {
                            return (
                                <NavItem eventKey={route.path} href={route.path}>{route.name}</NavItem>
                            );
                        })
                    }
                </Nav>
            </Navbar.Header>
        </Navbar>
    );
}

注意,以下工作没有任何问题

render() {
    return (
        <Navbar inverse className="widget-header">
            <Navbar.Header>
                <Nav activeKey={this.props.active.path}>
                    <NavItem eventKey="/" href="/">Dashboard</NavItem>
                    <NavItem eventKey="/tools/navigation-manager" href="/tools/navigation-manager">Navigation Manager Tool</NavItem>
                </Nav>
            </Navbar.Header>
        </Navbar>
    );
}

keyeventKey是不同的属性。他们没有任何共同点。

如果创建组件阵列,则应始终提供key

关于密钥的React文档。