按首字母排序和呈現聯系人串列-有解無憂

我有這樣的串列聯系人，我試圖在 SOF 中找到我的問題但沒有，你們能幫幫我嗎？謝謝你

export const rows = [
  {
    id: 1,
    name: 'Snow',
    email: 'Jon',
    contact: 35,
    avatar: ''
  },
  { id: 2, name: 'Lannister', email: 'Cersei', contact: 42,
    avatar: '' },
  { id: 3, name: 'Lannister', email: 'Jaime', contact: 45,
    avatar: '' },
  { id: 4, name: 'Stark', email: 'Arya', contact: 16,
    avatar: '' },
  { id: 5, name: 'Targaryen', email: 'Daenerys', contact: null,
    avatar: '' },
  { id: 6, name: 'Melisandre', email: null, contact: 150,
    avatar: '' },
  { id: 7, name: 'Clifford', email: 'Ferrara', contact: 44,
    avatar: '' },
  { id: 8, name: 'Frances', email: 'Rossini', contact: 36,
    avatar: '' },
  { id: 9, name: 'Roxie', email: 'Harvey', contact: 65,
    avatar: '' },
  { id: 11, name: 'Snow', email: 'Jon', contact: 35 ,
    avatar: ''},
  { id: 12, name: 'Lannister', email: 'Cersei', contact: 42,
    avatar: '' },
  
];

我想像這樣渲染它：

按首字母排序和呈現聯系人串列

uj5u.com熱心網友回復：

  const rows = [
    {
      id: 1,
      name: "Snow",
      email: "Jon",
      contact: 35,
      avatar: "",
    },
    { id: 2, name: "Lannister", email: "Cersei", contact: 42, avatar: "" },
    { id: 3, name: "Lannister", email: "Jaime", contact: 45, avatar: "" },
    { id: 4, name: "Stark", email: "Arya", contact: 16, avatar: "" },
    { id: 5, name: "Targaryen", email: "Daenerys", contact: null, avatar: "" },
    { id: 6, name: "Melisandre", email: null, contact: 150, avatar: "" },
    { id: 7, name: "Clifford", email: "Ferrara", contact: 44, avatar: "" },
    { id: 8, name: "Frances", email: "Rossini", contact: 36, avatar: "" },
    { id: 9, name: "Roxie", email: "Harvey", contact: 65, avatar: "" },
    { id: 11, name: "Snow", email: "Jon", contact: 35, avatar: "" },
    { id: 12, name: "Lannister", email: "Cersei", contact: 42, avatar: "" },
  ];

const sortedArray = rows.sort((current, next) => current.name > next.name ? 1 : next.name > current.name ? -1 : 0 )

console.log(sortedArray)

uj5u.com熱心網友回復：

我不確定您的確切問題是什么，但也許我可以給您一個起點：

const grouped = rows.reduce(
  (groupedRows, row) => {
     const firstLetter = row.name.slice(0,1);
     return {
       ...groupedRows,
       [firstLetter]: [...(groupedRows[firstLetter] || []), row]
     }  
  }, {}
)

這會給你一個像

{ L: [ 
       { id: 2, name: 'Lannister', email: 'Cersei', contact: 42, avatar: '' },
       { id: 3, name: 'Lannister', email: 'Jaime', contact: 45, avatar: '' } 
     ],
  S: [ 
       { id: 4, name: 'Stark', email: 'Arya', contact: 16, avatar: '' },
     ]
  // etc.
}

然后使用Object.entries(grouped)將其轉換為可以迭代并構建 UI 的序列。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/492152.html

標籤：javascript 反应打字稿

上一篇：ReactJS：可點擊文本-如何禁用文本區域外的點擊？

下一篇：如何在JavaScript中正確調整Json檔案格式？