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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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> ))}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> )}