从数组react.js创建一个列表作为常见问题解答

Question

我正在尝试创建一个FAQ，我有来自API的数据，但我在如何在屏幕上显示它方面遇到了问题，这是我的数据

0:
answer: "The wellbeing score is Empatho's way of showing an end-user what their current state of wellbeing is. "
application: "Admin Portal"
question: "What is the wellbeing score?"
section: "Wellbeing Dashboard"
[[Prototype]]: Object
1:
answer: "The wellbeing score is calculated using an individuals Heart Rate Variability (HRV), their passive data, as well as some survey questions that help Empatho get to know a person better. "
application: "Admin Portal"
question: "How is the wellbeing score calculated?"
section: "Wellbeing Dashboard"
[[Prototype]]: Object

我想插入数据的React.js代码是：

<Accordion expanded={expanded === 'panel1'}
onChange={handleChange('panel1')}
sx={{ width: '100%', padding: '30px' }}
style={{ borderRadius: 20, margin:'10px 0px' }} >
<AccordionSummary expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
sx={{ borderRadius:10 }} >

<div style={{ display:'flex', flexDirection:'row', alignItems:'center' }}>
<div>
<img src={wellbeingfaq} style={{ width:'auto', height:20, marginRight:25 }}/>
</div>
<div style={{ fontSize:'1.5em', fontWeight:'bold' }}>Wellbeing Dashboard</div>
</div>
</AccordionSummary>
<AccordionDetails sx={{ padding: '20px' }}> 
<div style={{ fontSize:'1.3em', fontWeight:'bold' }}>
<div>Question</div>
</div>
<div style={{ fontSize:'1.0em'}}>
<div>Answer</div>
</div>                 

</AccordionDetails>     

</Accordion>

我想用"；问题"；以及"；回答"；

我该怎么做？我完全迷路了。

Answer 1

您需要运行每一项并返回所需的JSX代码。这可以通过类似这样的.map函数来完成：

<AccordionDetails> 
{ this.state.listFromApi.map((item,index) => (
<div key={index}>
<div>
<div>Question</div>
<div>{item.question}</div>
</div
<div style={{ fontSize:'1.0em'}}>
<div>Answer</div>
<div>{item.answer}</div>
</div>
</div>
))}
</AccordionDetails> 

为了避免代码混乱，我建议将其移到函数中。

<AccordionDetails> 
{this.renderQuestions()}
<AccordionDetails>