尝试在 React JS 中按部分显示 JSON

Question

问题：

这就是应用程序应该如何呈现联系人，根据他们的名字字母按部分组织 - A，B，C ...到目前为止，我无法找到一种方法以这种方式从 A 到 Z 显示它们。改变 JSON 结构或在 ReactJS 中都没有解决这个问题。Array.map每次尝试在 JSON 中添加更多属性，都会面临一次“扫描”的限制。任何帮助表示赞赏！

这是其背后的 JSON：

[

    {

        "id": 1,

        "fname": "Amanda",

        "lname": "Gonzales",

        "contact": "(31) 9 9580-2530",

    },

    {

        "id": 2,

        "fname": "Astrid",

        "lname": "Guzman",

        "contact": "(31) 9 9790-2530",

    },

    {

        "id": 3,

        "fname": "Aurora",

        "lname": "Muñoz",

        "contact": "(57) 9 9580-2530",

    },

  

]

还有 React JS：

class ShowContactsList extends Component {

    render() {

        const mappedJSON = mockData.map((inputMap, index) => (

            <ContactListOneContact

                key={index}

                lname={inputMap.lname}

                fname={inputMap.fname}

                fname={inputMap.fname}

                contact={inputMap.contact}

            />

        ));

        return (

            <div style={{ backgroundColor: 'yellow', width: '80%' }}>

                <h1>A</h1>

                {mappedJSON}

            </div>

        )

    }

}

Answer 1

您可以为您的联系人按字母创建一个组，然后迭代这些字母，并为每个字母迭代联系人    export default class ShowContactsList extends Component {      render() {        const groupedByLetter = mockData.reduce((groups, contact) => {          const letter = contact.fname[0].toUpperCase();          const group = groups[letter] || [];          group.push(contact);          groups[letter] = group;          return groups;        }, {});            return Object.entries(groupedByLetter).map(([letter, contacts]) => {          return (            <div style={{ backgroundColor: "yellow", width: "80%" }}>              <h1>{letter}</h1>              {contacts.map((inputMap, index) => (                <ContactListOneContact                  key={index}                  lname={inputMap.lname}                  fname={inputMap.fname}                  contact={inputMap.contact}                />              ))}            </div>          );        });      }    }