Question

对此有所了解..

一些问题＆＃34;这可能会回答我的问题＆＃34;当我开始写这个问题时显示在下面，但他们确实似乎没有处理这个问题。

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

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。我有＆＃34; eventKey＆＃34;设置在这，但我检查，以确保没有重复..没有。也许有人可能会告诉我为什么会出现这个警告以及我需要做些什么来解决它。

这是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);

我认为这可能与＆＃34; Link＆＃34;对于＆＃34; NavBar.Brand＆＃34;所以我重构了这个：

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

其中我也重新编号。仍然没有解决警告。

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

Answer 1

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

<强>背景

每当渲染数组时，React都希望每个项目都具有LF = function(x) dnorm(250, x, 2)*dnorm(265, x, 2)*dnorm(259, x, 2) curve(LF, from = 250, to = 266, log = "y")属性。我注意到代码末尾附近有一个数组：

eventKey

这表示如果key为真，则渲染一个包含一个NavItem的数组，否则渲染一个LinkContainer。

因此当isAuthorized为true时，您最终会渲染一个数组。数组中的每个项都需要一个唯一的{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

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

{isAuthorised ? (
  <NavItem 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添加一个唯一键。

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

2 个答案: