缺少动态生成的 react-bootstrap 组件的关键属性

Question

我偶然发现了一些可疑的行为，我不确定错误是在我身上，还是这是一个 react-bootstrap 错误。

当我动态创建导航时，出现跟随错误

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

Answer 1

key 和 eventKey 是不同的属性。他们没有任何共同点。

如果您创建组件数组，则应始终提供key。

React docs about key.