根據ID映射答案-有解無憂

我有一個像這樣的測驗的物件陣列。

[
    {
        answer: "Patience"
        question: "Name a GNR song..."
        questionId: 13
        questiontype: "text"
        userId: 1
    },
    {
        answer: "ABC"
        question: "Select three MJ songs..."
        questionId: 14
        questiontype: "checkbox"
        userId: 1
    },
    {
        answer: "Thriller"
        question: "Name three MJ songs..."
        questionId: 14
        questiontype: "checkbox"
        userId: 1
    }
]

我想要做的是在頁面上顯示它們。所以目前我正在做這樣的事情

{quizData.map((item, index) => {
  return (
    <div key={index}>
      <Col xs={12}>
        <p className="text-start quiz-text">
          <strong>
            Question {item.question}
          </strong>
        </p>
      </Col>
      <Col xs={12}>
        <p className="text-start argent c-font quiz-text">{item.answer}</p>
      </Col>
    </div>
  );
})}

問題是這將為每個答案顯示一個新的問題行。所以對于上面的資料，我看到的是這樣的

Name a GNR song
    Patience

Select 3 MJ songs
    ABC
    
Select 3 MJ songs
    Thriller

我想要做的是只有一個問題，但如果該問題有多個答案，請將它們顯示為該問題的一部分。所以上面的內容類似于

Name a GNR song
    Patience

Select 3 MJ songs
    ABC
    Thriller

我想我必須以某種方式匹配 questionId，但不確定如何在我的地圖中實作這一點？

任何建議表示贊賞。

謝謝

uj5u.com熱心網友回復：

您可以使用 array.filter() 或 for 回圈來修改陣列 berfore 實作。在 jsx 中的 map 中實作之前，您必須先制作正確的陣列

uj5u.com熱心網友回復：

如果您可以控制，我會親自更改資料的結構以將問題和答案分開。

但是，如果你不這樣做，你可以做這樣的事情：

{quizData.map((item, index) => {
  return (
    <div key={index}>
      <Col xs={12}>
        <p className="text-start quiz-text">
          <strong>
            Question {item.question}
          </strong>
        </p>
      </Col>
      <Col xs={12}>
        {quizData.filter(answer => answer.question === item.question).map(answer => {
          return <p>{ answer.answer }</p>
        })}
      </Col>
    </div>
  );
})}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/346416.html

標籤：javascript 反应 ecmascript-6

上一篇：添加屬性后獲取初始空物件的屬性

下一篇：Reactjs：在前端顯示來自物件的某些元素