Maison  >  Questions et réponses  >  le corps du texte

Mapper un tableau de tableaux à la liste

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粉668804228P粉668804228431 Il y a quelques jours490

répondre à tous(2)je répondrai

  • P粉262073176

    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>
    ))}

    répondre
    0
  • P粉105971514

    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>
    )}

    répondre
    0
  • Annulerrépondre