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中说它是navmenu。 我在这里设置了“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为true，则使用一个NavItem呈现数组，否则呈现一个LinkContainer。

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

解

在这种情况下，数组似乎没有任何用途，所以我只是删除它，如下所示:(注意第一行和最后一行）

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

如果由于某种原因需要阵列，你应该可以通过添加如下的key属性来修复它：

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

Answer 2

请参阅https://facebook.github.io/react/docs/lists-and-keys.html#keys

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