javascript - React-Redux - NavMenu 上的唯一键警告

Question

新的..

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

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

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 中表示它。我在其中设置了“eventKey”，但是我已经检查以确保没有重复项……没有。也许有人会启发我为什么会出现此警告以及我必须采取什么措施来解决它。

这是完整的 NavMenu:

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>

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

为什么会出现此警告，即我没有做错什么以及我需要更改什么才能消除警告。

Answer 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}> ...
]) : (