React-Redux - NavMenu 上的唯一键警告答案

【问题标题】：React-Redux - Unique key warning on NavMenuReact-Redux - NavMenu 上的唯一键警告
【发布时间】：2017-04-30 03:41:04
【问题描述】：

对此不熟悉..

当我开始写这个问题时，下面会显示一些问题“这可能会回答我的问题”，但他们似乎没有处理这个问题。

在控制台中我收到以下警告：

warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `NavMenu`. See fb-me-react-warning-keys for more information.
in NavItem (created by NavMenu)
in NavMenu (created by Connect(NavMenu))
in Connect(NavMenu) (created by Layout)
in div (created by Layout)
in Layout (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider

在 NavItem id 中说它是 navmenu。我在其中设置了“eventKey”，但是我已经检查以确保没有重复项.. 没有。也许有人会告诉我为什么会出现这个警告以及我必须做些什么来解决它。

这是完整的导航菜单：

import React, {Component} from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
import { LinkContainer } from 'react-router-bootstrap'

class NavMenu extends Component {
  render() {
    const { isAuthorised, username } = this.props;

    return (
      <div className='main-nav'>
        <Navbar inverse collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to={ '/' }>JobsLedger</Link>
            </Navbar.Brand>
            {<Navbar.Toggle />}
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <LinkContainer to={'/'}>
                <NavItem eventKey={1}><span className='glyphicon glyphicon-home'></span> Home</NavItem>
              </LinkContainer>
              <LinkContainer to={'/counter'}>
                <NavItem eventKey={2} ><span className='glyphicon glyphicon-education'></span> Counter</NavItem> 
                </LinkContainer> 
              <LinkContainer to={'/fetchdata'}>
                <NavItem eventKey={3}><span className='glyphicon glyphicon-th-list'></span> Fetch data</NavItem>
              </LinkContainer>
              {isAuthorised && (
                <NavDropdown eventKey={4} title="Clients" id="basic-nav-dropdown">
                  <LinkContainer to={'/clients/index'}>
                    <MenuItem eventKey={4.1}><span className='glyphicon glyphicon-th-list'></span> Client List</MenuItem>
                  </LinkContainer>
                  <LinkContainer to={'/clients/create'}>
                    <MenuItem eventKey={4.2}><span className='glyphicon glyphicon-user'></span> New Client</MenuItem>
                  </LinkContainer>
                  <MenuItem eventKey={4.3}>Something else here</MenuItem>
                  <MenuItem divider />
                  <MenuItem eventKey={4.4}>Separated link</MenuItem>
                </NavDropdown>
              )}
            </Nav>
              <Nav pullRight>
              {isAuthorised ? ([
                <NavItem eventKey={5}><span className='glyphicon glyphicon-user'></span> Hello {username}</NavItem>
              ]) : (
                <LinkContainer to={'/login'}>
                  <NavItem eventKey={6} ><span className='glyphicon glyphicon-user'></span> Login</NavItem>
                </LinkContainer>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
  username: state.login.username,
})
export default connect(mapStateToProps)(NavMenu);

我认为这可能与“NavBar.Brand”的“链接”有关，所以我重构了这个：

<Navbar.Header>
        <LinkContainer to={'/'}>
          <Navbar.Brand>
            <NavItem eventKey={1}>JobsLedger</NavItem>
          </Navbar.Brand>
        </LinkContainer>
        {<Navbar.Toggle />}
      </Navbar.Header>

我还重新编号了所有内容。仍然没有修复警告。

为什么会给出这个警告，即我没有错什么以及我需要更改什么来删除警告。

【问题讨论】：

赋予 NavItem 唯一键，例如 1,2,3,4 ... 例如：

标签： javascript reactjs react-router react-redux

【解决方案1】：

另一个答案中提到的 eventKey 属性用于 react-bootstrap 中的其他内容 - 我认为它与此处的错误无关。

背景

每当你渲染一个数组时，React 期望每个项目都有一个key 属性。我注意到您的代码末尾附近有一个数组：

{isAuthorised ? ([
  <NavItem eventKey={5}><span className='glyphicon glyphicon-user'></span> Hello {username}</NavItem>
]) : (
<LinkContainer to={'/login'}>
  <NavItem eventKey={6} ><span className='glyphicon glyphicon-user'></span> Login</NavItem>
</LinkContainer>
)}

这表示如果 isAuthorized 为真，则使用一个 NavItem 渲染一个数组，否则渲染一个 LinkContainer。

所以当 isAuthorized 为真时，你最终会渲染一个数组。数组中的每个项目都需要一个唯一的 key 属性，否则您将看到上面的错误。

解决方案

在这种情况下，数组似乎没有任何用途，所以我只需将其删除，如下所示：（注意第一行和最后一行）

{isAuthorised ? (
  <NavItem eventKey={5}> ...
) : (

如果您出于某种原因需要该数组，您应该可以通过添加 key 属性来修复它，如下所示：

{isAuthorised ? ([
  <NavItem key={0} eventKey={5}> ...
]) : (

【讨论】：

【解决方案2】：

见https://facebook.github.io/react/docs/lists-and-keys.html#keys

您需要属性“key”而不是“eventKey”。 IE。 <NavItem eventKey={1}> 应该是 <NavItem key={1}>。您需要为每个 NavItem 添加一个唯一键，并为每个 LinkContainer 添加一个唯一键。

【讨论】：