Question

关于React组件，我有以下代码：

 <FilterGroups
   data={usersList}
   selectedGroups={selectedGroups}
   onChange={this.onFilterSelect}
 />

FilterGroups组件如下：

import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'lenses/common/components/Icon';
import { flatten, uniq, map, pipe } from 'ramda';

import { Dropdown, Toggle, Menu } from 'shared/common/components/LensesDropdown';

class FilterGroups extends React.Component {
  static propTypes = {
    data: PropTypes.array,
    selectedGroups: PropTypes.array,
    onChange: PropTypes.func
  };

  static defaultProps = {
    selectedGroups: []
  };

  renderBadge = () => {
    const { selectedGroups } = this.props;
    if (selectedGroups.length === 0) {
      return null;
    }
    return <span className="badge badge-light ml-1">{selectedGroups.length}</span>;
  };

  onClick = groupName => e => {
    const { onChange } = this.props;
    e.preventDefault();
    onChange(groupName);
  };

  getAllGroups = data =>
    pipe(
      map(user => user.groups),
      uniq,
      flatten
    )(data);

  render() {
    const { data, selectedGroups } = this.props;

    const allUniqueGroups = this.getAllGroups(data);

    return (
      <Dropdown>
        <Toggle variant="primary">Filter by Group {this.renderBadge()}</Toggle>

        <Menu>
          {allUniqueGroups.map(group => (
            <a
              key={group}
              className="dropdown-item d-flex justify-content-between align-items-center"
              href="#"
              onClick={this.onClick(group)}
            >
              <span className="ml-2">{group}</span>
              {selectedGroups.includes(group) && <Icon icon="check" />}
            </a>
          ))}
        </Menu>
      </Dropdown>
    );
  }
}

export default FilterGroups;

我得到以下错误：Each child in an array or iterator should have a unique "key" prop.。也是这个Check the render method of FilterGroups .

我在组件内部添加了一个keyFiled={group}，但是却无济于事。我也以小组成员身份通过。有人可以告诉我我在做什么错吗？

Answer 1

尝试一下：

      <a
          key={group}
          className="dropdown-item d-flex justify-content-between align-items-center"
          href="#"
          onClick={this.onClick(group)}
        >
          <span key={group} className="ml-2">{group}</span>
          {selectedGroups.includes(group) && <Icon key={group} icon="check" />}
        </a>
      ))}

将键插入跨度和图标。

Answer 2

只需为其提供索引以确保它们是唯一的。 allUniqueGroups.map（（group，index）和index + group作为键。

Answer 3

第一件事Each child in an array or iterator should have a unique "key" prop是警告而不是错误，这意味着您在控制台上还有另一条日志显示了我认为的错误，可能是allUniqueGroups是undefined，并且解决方案是：注意（allUniqueGroups &&在代码的开头。

{allUniqueGroups && allUniqueGroups.map(group => (
            <a
              key={group}
              className="dropdown-item d-flex justify-content-between align-items-center"
              href="#"
              onClick={this.onClick(group)}
            >
              <span className="ml-2">{group}</span>
              {selectedGroups.includes(group) && <Icon icon="check" />}
            </a>
          ))}

我在React组件中的关键实现有什么错

3 个答案: