React-Redux

Question

新手..

当我开始写这个问题时下面显示了一些问题 "That might answer my 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" 的 "Link" 有关，所以我重构为：

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

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

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

Answer 1

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

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

Answer 2

另一个答案中提到的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}> ...
]) : (

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

React-Redux - Unique key warning on NavMenu

javascript

reactjs

react-router