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

【问题标题】：Trying to display JSON by sections in React JS尝试在 React JS 中按部分显示 JSON
【发布时间】：2021-02-15 16:14:53
【问题描述】：

问题：

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

这是它背后的 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>
        )
    }
}

【问题讨论】：

每次迭代mockData整个组件重新渲染时，可能会出现死循环。尝试console.log(mappedJson) 看看它会返回什么。将此映射函数移动到其他地方，作为类函数或最佳重构组件到功能组件。
请注意：所选解决方案假定数据已按姓氏预先排序。如果它未排序，那么它将仅按结构中出现的姓氏分组。为确保已排序，您可以使用sort 和localeCompare：demo

标签： javascript arrays json reactjs jsx

【解决方案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>
          );
        });
      }
    }

https://codesandbox.io/s/twilight-cdn-e4tgs?file=/src/App.js的演示

【讨论】：