Peta tatasusunan untuk disenaraikan

Question

Saya mempunyai pelbagai jawapan yang disusun mengikut soalan yang mereka miliki seperti ini:

sortedAnswers= [[Answer1, Answer2, Answer3, Answer4],[AnswerA, AnswerB, AnswerC, AnswerD]...]

Saya cuba memberikan senarai ListItemButton dalam React. Saya cuba

    <ButtonGroup
      fullWidth
      orientation='vertical'
      onClick={handleSubmit}
      onChange={handleChange}
    >
      {sortedAnswers.map((item) =>
        <ListItemButton>{item}</ListItemButton> )}
    </ButtonGroup>

Tetapi ia tidak berfungsi seperti yang diharapkan, saya mendapat ini:

Saya mahu setiap jawapan mempunyai ListItemButton, jadi 4 butang setiap soalan. Bagaimanakah saya boleh mendapatkan jawapan untuk tatasusunan pertama dalam butang?

Answer 1

Gunakan gelung bersarang untuk mengulangi semua jawapan bergantung pada rupa reka letak anda:

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

Answer 2

Seperti yang anda nyatakan错误：无法读取未定义的属性（读取“地图”） sila tambah semakan bersyarat sebelum pemetaan.

{sortedAnswers.length > 0 && (
  <ButtonGroup fullWidth orientation='vertical' onClick={handleSubmit} onChange={handleChange}>
    {sortedAnswers[0].map((answer, index) => (
      <ListItemButton key={index}>{answer}</ListItemButton>
    ))}
  </ButtonGroup>
)}