动态排序下拉列表中的对象数组

Question

在选择项目数组中的项目时，实现了下拉列表，其中添加了活动类。一切正常，但您需要首先在列表中显示所选项目，而不是按任何顺序显示。我尝试了const newItems = [selectedAccount, ... items]这种方法，然后映射newItems，但问题是然后选择的项目在下拉列表中显示了两次。

type TAccountListProps= {
  isVisible: boolean;
  items: Accounts.Account[];
  selectedAccount: Accounts.Account | null;
  onSelect: (id: string) => void;
  onToggle: (value: boolean) => void;
};

export const AccountList: React.FunctionComponent<TAccountListProps> = ({
  isVisible,
  items,
  selectedAccount,
  onSelect,
  onToggle
}) => {
  if (!isVisible) {
    return null;
  }

  return (
    <div className="account-list">

      {items.map((item) => {

        const isSelected = item.id == selectedAccount?.id;

        return (
          <div
            key={item.id}
            className={classnames(
              'account-list__account',
              { 'account-list__account_active': isSelected }
            )}
            onClick={() => {
              onSelect(item.id);
              onToggle(false);
            }}
          >
            <div className="account-list__icon-block">
              <CardOutline className="account-list__icon" />
              <div className="account-list__info">
                <div className="account-list__name">
                  Расчётный счёт
                </div>
                <div className="account-list__number">
                  {formatAccountNumber(item.num.value)}
                </div>
              </div>
            </div>
            {item.balance && (
              <div className="account-list__balance">
                <span>{item.balance}</span>
                <span className="account-list__currency">
                  &nbsp;
                  {CurrencySigns.Rub}
                </span>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

Answer 1

所以过滤掉选中的项：

const newItems = [
  selectedAccount,
  ...items.filter(item.id != selectedAccount?.id)
];