React Projectで材料UIカードコンポーネントにデータを入力

Question

プロジェクトに、すべての展開可能なカードがリストのようなページがあります。現在私はスケーラブルではないコードを持っています。私はこのコードに非常に多くのカードタグを持っています。私がしたいのは、jsonからカードの各フィールドのデータをロードし、ちょうど1つのループ/マップの種類の関数を実行することによってすべてのカードを表示する短いループを持つことです。リストにカードが追加されるたびにカードタグを追加し続けることができません。私はどうすればいいのですか？

export default class ExpandableCard extends Component { 


    render(){ 
     return (
    <MuiThemeProvider> 
     <div> 
     <div> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
      <CardHeader 
       title="Game Of Thrones" 
       subtitle="S01 E02" 
       actAsExpander={true} 
       showExpandableButton={true} 
      /> 
      <CardText expandable={true}> 
       Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
       which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
       seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
       Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
      </CardText> 
     </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
      <Card> 
       <CardHeader 
        title="Game Of Thrones" 
        subtitle="S01 E02" 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <CardText expandable={true}> 
        Friends is an American television sitcom, created by David Crane and Marta Kauffman, 
        which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten 
        seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa 
        Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer 
       </CardText> 
      </Card> 
     </div> 
      <FloatingActionButton className="floatingButton" backgroundColor='#293C8E'> 
       <ContentAdd /> 
      </FloatingActionButton> 
     </div> 
      </MuiThemeProvider> 
     ); 
    } 
} 

Answer 1

あなたのカードを構築するデータをループします。 私は明らかにあなたのデータを構造化する方法についての仮定を作ってるんだが、私はそれが明確なポイント

export default class ExpandableCard extends Component { 

    render(){ 
     // pass in your data through props 
     const { cardDataJSONObject } = this.props 

     // assuming you are getting your card data in a large json object 
     let cardList = [] 
     Object.keys(cardDataJSONObject).forEach((cardIndex) => { 
      let card = cardDataJSONObject[cardIndex] 
      cardList.push (
       <Card> 
        <CardHeader 
         title={card.title} 
         subtitle={card.subtitle} 
         actAsExpander={true} 
         showExpandableButton={true} 
        /> 
        <CardText expandable={true}> 
         { card.text } 
        </CardText> 
       </Card>    
      ) 
     }) 

     return (
      <MuiThemeProvider> 
       <div> 
        <div className='card-list'> 
         {/* here we are rendering the list of cards we build up above */} 
         { cardList } 
        </div> 
        <FloatingActionButton className="floatingButton" backgroundColor='#293C8E'> 
         <ContentAdd /> 
        </FloatingActionButton> 
       </div> 
      </MuiThemeProvider> 
     ); 
    } 
}