Question

我偶然发现了可疑行为，我不确定错误是否在我的最后，或者这是一个反应引导错误。

当我动态创建导航时，我收到了关注错误

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

<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageButton" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:src="@drawable/image1"/>和key是不同的属性。没有任何共同之处。

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

React docs about key

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

1 个答案: