React/Typescript：选定项目计数器逻辑答案

【问题标题】：React/Typescript: Selected items counter logicReact/Typescript：选定项目计数器逻辑
【发布时间】：2021-07-13 17:22:27
【问题描述】：

我一直在尝试创建一个带有计数器的选择列表。目标是能够选择尽可能多的项目，并有一个小标签，其中包含两个第一个选定项目的项目名称。至于其他项目，我想要一个显示“+ {剩余选定项目的数量}”的计数器。但是，我对计数器的逻辑有点坚持。使其工作的最佳方法和语法是什么？非常感谢！

import { Tag } from './Tag';

type TagSize =  'sm' | 'md' | 'lg' ;

export type TagListProps = {
  items: Array<{
    id: string;
    label: string;
  }>;
  limit?: number;
  size?: TagSize;
  onRemove?(id: string): void;
};

export function TagList({
  items,
  limit,
  size = 'sm',
  onRemove
}: TagListProps): JSX.Element {

  const tags = limit ? items.slice(0, limit) : items;
  const counter = items.length - tags.length;

  return (
    <div className='tag-list'>
      {
        tags.map((tag) => (
          <Tag size={ size } className='single-tag' key='' removable onRemove={ () => onRemove(tag.id) }>
            { tag.label }
          </Tag>
        ))
      }

//that's the logic where I'm getting stuck 

      {  limit  && (
      <div className='items-counter'>
        { counter }
      </div>
        ) }

    </div>
  );
}

【问题讨论】：

你遇到了什么问题？
目前，计数器始终显示 0。我假设逻辑应该类似于 ``` { tags > 2 && (
{ counter }
) }``` 没有真正的错误，只是有问题的逻辑。
你能为我们设置一个密码箱吗？

标签： javascript reactjs typescript react-hooks jsx

【解决方案1】：

您的限制是否可能大于items 数组的长度？如果是这种情况，它将始终显示 0。

【讨论】：

嘿，科迪！是的，你完全正确。这是我需要的：items.length > 2

【解决方案2】：

分辨率：

事实证明，解决方案非常简单，正如@Cody 在其中一个 cmets 中提到的那样，必须根据数组长度（items.length > limit）设置限制。解决方法如下：


type TagSize =  'sm' | 'md' | 'lg' ;

export type TagListProps = {
  items: Array<{
    id: string;
    label: string;
  }>;
  limit?: number;
  size?: TagSize;
  onRemove?(id: string): void;
};

export function TagList({
  items,
  limit,
  size = 'sm',
  onRemove
}: TagListProps): JSX.Element {

  const tags = limit ? items.slice(0, limit) : items;
  const counter = items.length - tags.length;

  return (
    <div className='tag-list'>
      {
        tags.map((tag) => (
          <Tag size={ size } className='single-tag' key='' removable onRemove={ () => onRemove(tag.id) }>
            { tag.label }
          </Tag>
        ))
      }

//that's the logic where I'm getting stuck 

      { items.length > limit && (
      <div className='items-counter'>
        { counter }
      </div>
        ) }

    </div>
  );
}``

【讨论】：