尝试在 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>

          );

        });

      }

    }