如何解决如何循环遍历 GraphQL 映射中的数组
我正在尝试使用 GraphQL 循环遍历来自 Sanity 的数据。我已经设置了我的 .map 来遍历更大的信息并返回一个包含所有内容的数组，这运行良好；但是，当涉及到我的 .map 中的数组时，我似乎无法弄清楚如何正确循环它们并显示数组中的每个数据行。
我需要能够使用 .map 中的三个不同数据集来执行此操作。这可能比我做的更容易，但如果有人能帮助我打破这方面的心理迷雾，我将不胜感激。这是函数（顺便说一句，这是一个组件文件）：
const { minutes } = useStaticQuery(graphql`
query {
minutes: allSanityMinutes {
nodes {
contributors
endTime(formatString: "h:mma [on] MM/DD/YYYY")
id
insertReport {
treasurersName
totalBalance
slug {
current
}
notes
id
dateGenerated(formatString: "MM/DD/YYYY")
approvedBudget
expenses {
amountOfExpense
dayOfExpense
nameOfExpense
timeframe
}
}
meetingStart(formatString: "h:mma [on] MM/DD/YYYY")
members {
... on SanityBoardMembers {
id
email
phone
name
}
... on SanityOtherMembers {
newMember
}
}
name
newBusiness
oldBusiness
tags
teleconference
}
}
}
`);
const allMinutes = minutes.nodes;
console.log(allMinutes);
return (
<CardStyles>
{allMinutes.map((minute,index) => (
<ItemStyles>
<div className="card" key={minute.id}>
<div className="title">Called to order by: {minute.name}</div>
<div className="content">
Meeting began at: {minute.meetingStart}
</div>
<br />
<div className="content">
There were {minute.contributors} members that contributed proxy
information.
</div>
<br />
<div className="content">
Those present are: **List of Members**
</div>
<br />
<TreasurerStyles>
The treasurers report is as follows:{' '}
<section>
<ul>
<li className="full">
<div>
<strong>Treasurer:</strong>{' '}
{minute.insertReport.treasurersName}
</div>
</li>
<li className="full">
<div>
<strong>Date:</strong> {minute.insertReport.dateGenerated}
</div>
</li>
<li className="quarter">
<div data-name="Date">
<strong>Date</strong>
</div>
<div data-name="Place">
<strong>Place</strong>
</div>
<div data-name="Cost">
<strong>Cost</strong>
</div>
<div data-name="Timeframe">
<strong>Timeframe</strong>
</div>
</li>
<li className="quarter">
<div>
{minute.insertReport.expenses[index].dayOfExpense}
</div>
<div>
{minute.insertReport.expenses[index].nameOfExpense}
</div>
<div>
{formatMoney(
minute.insertReport.expenses[index].amountOfExpense
)}
</div>
<div>{minute.insertReport.expenses[index].timeframe}</div>
</li>
<li className="full">
<div>
<strong>Total Balance:</strong>{' '}
{formatMoney(minute.insertReport.totalBalance)}
</div>
</li>
<li className="full">
<div>
<strong>Notes:</strong> {minute.insertReport.notes}
</div>
</li>
<li className="full">
<div>Budget was approved as shown.</div>
</li>
</ul>
</section>
</TreasurerStyles>
<br />
<div className="content">
<strong>Old Business:</strong>
<br /> {minute.oldBusiness}
</div>
<br />
<div className="content">
<strong>New Business:</strong> <br />
{minute.newBusiness}
</div>
<br />
<div className="content">Meeting ended at: {minute.endTime}</div>
<br />
<div className="content">Tags: {minute.tags}</div>
</div>
</ItemStyles>
))}
</CardStyles>
);
}
地图返回一个数组，如下所示：
0: {…}
contributors: 8
endTime: "12:10am on 04/17/2021"
id: "-0512c8fe-6603-5ac2-84de-0b34befdcbb9"
insertReport: Object { treasurersName: "Margi Name",totalBalance: 4291189,notes: "Total does not include money that will be collected from HOA dues bill that was recently sent.",… }
meetingStart: "11:33pm on 10/14/2020"
members: (10) […]
0: Object { __typename: "SanityOtherMembers",newMember: "Carl and Katty Three" }
1: Object { __typename: "SanityOtherMembers",newMember: "Linn and Bill One" }
2: Object { __typename: "SanityOtherMembers",newMember: "Enrique Eight" }
3: Object { __typename: "SanityOtherMembers",newMember: "Dee Five" }
4: Object { __typename: "SanityOtherMembers",newMember: "Liz Six" }
5: Object { __typename: "SanityOtherMembers",newMember: "Dan and Diana Nine" }
6: Object { __typename: "SanityOtherMembers",newMember: "Paul and Pat Seven" }
7: Object { __typename: "SanityOtherMembers",newMember: "Bob and Betty Four" }
8: Object { __typename: "SanityOtherMembers",newMember: "Margi Name" }
9: Object { __typename: "SanityOtherMembers",newMember: "Tom Two" }
length: 10
<prototype>: Array []
name: "Johnny Five"
newBusiness: (3) […]
0: "Trash removal needs to be negotiated for the coming year. Kat Name offered to contact Sheila Noname from Grand Mesa Metro District to coordinate this service."
1: "New officers for the association that were voted on and approved are the following people: Randall One [President],Dee Two [Vice-President],Margi Three [Sec'y/Treasurer]"
2: "Design Review Committee: Example One [Chairman],Fred Two,Tom Three,Pat Four,Johnny Five,Phil Six,Carl Seven"
length: 3
<prototype>: Array []
oldBusiness: Array [ "See included treasurers report." ]
tags: Array [ "treasurers report,trash removal,new officers,design review committee,october,14,2020" ]
teleconference: true
<prototype>: Object { … }
length: 1
<prototype>: Array []
MinutesItemGrid.js:87
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
