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

Posted 2023-02-22

【中文标题】尝试在 React JS 中按部分显示 JSON

【英文标题】：Trying to display JSON by sections in React JS

【发布时间】：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

【参考方案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的演示