第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

嘗試在 React JS 中按部分顯示 JSON

嘗試在 React JS 中按部分顯示 JSON

qq_花開花謝_0 2023-07-06 15:04:06
問題:這就是應(yīng)用程序應(yīng)該如何呈現(xiàn)聯(lián)系人,根據(jù)他們的名字字母按部分組織 - A,B,C ...到目前為止,我無法找到一種方法以這種方式從 A 到 Z 顯示它們。改變 JSON 結(jié)構(gòu)或在 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>        )    }}
查看完整描述

1 回答

?
三國紛爭

TA貢獻(xiàn)1804條經(jīng)驗 獲得超7個贊

您可以為您的聯(lián)系人按字母創(chuàng)建一個組,然后迭代這些字母,并為每個字母迭代聯(lián)系人


? ? 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>

? ? ? ? ? );

? ? ? ? });

? ? ? }

? ? }

查看完整回答
反對 回復(fù) 2023-07-06
  • 1 回答
  • 0 關(guān)注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號