Maison > Questions et réponses > le corps du texte
J'ai un éventail de réponses triées par question à laquelle elles appartiennent comme ceci :
sortedAnswers= [[Answer1, Answer2, Answer3, Answer4],[AnswerA, AnswerB, AnswerC, AnswerD]...]
J'essaie d'afficher une liste de ListItemButton dans React. J'ai essayé
<ButtonGroup fullWidth orientation='vertical' onClick={handleSubmit} onChange={handleChange} > {sortedAnswers.map((item) => <ListItemButton>{item}</ListItemButton> )} </ButtonGroup>
Mais cela n'a pas fonctionné comme prévu, j'ai obtenu ceci :
Je veux que chaque réponse ait un ListItemButton, donc 4 boutons par question. Comment puis-je obtenir la réponse pour le premier tableau du bouton ?
P粉2620731762023-09-07 09:55:31
Utilisez des boucles imbriquées pour parcourir toutes les réponses en fonction de l'apparence souhaitée de votre mise en page :
const sortedAnswers = [ [Answer1, Answer2, Answer3, Answer4], [AnswerA, AnswerB, AnswerC, AnswerD] ]; {sortedAnswers.map(answers => ( <ButtonGroup fullWidth orientation="vertical" onClick={handleSubmit} onChange={handleChange} > {answers.map(answer => ( <ListItemButton>{answer}</ListItemButton> ))} </ButtonGroup> ))}
P粉1059715142023-09-07 09:02:29
Comme vous l'avez mentionné错误:无法读取未定义的属性(读取“地图”)
veuillez ajouter une vérification conditionnelle avant le mappage.
{sortedAnswers.length > 0 && ( <ButtonGroup fullWidth orientation='vertical' onClick={handleSubmit} onChange={handleChange}> {sortedAnswers[0].map((answer, index) => ( <ListItemButton key={index}>{answer}</ListItemButton> ))} </ButtonGroup> )}