反応コンポーネントがスクリプトステートメント内でレンダリングされません

Question

反応の中で子コンポーネントをレンダリングする際に問題が見つかりました。私はスタイリングのためにReact-Toolboxを使用しています。

私は、このファイルは、プロジェクト

マイProject.jsxファイルが

render(){ 
    const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'; 
    return(

     <Card className={styles.card} key={this.props.id}> 
     <CardTitle 
      title={this.state.project.project_name} 
      subtitle={this.state.project.category} 
      /> 
     <CardText>{dummyText}</CardText> 

      {this.state.project.skills.map((skill) => { 
       console.log('Skill is: ',skill); 
       <CardActions> 
       <Chip key={skill.id}>{skill.skill_name}</Chip> 
       </CardActions> 
      })} 

     </Card> 

CardActionsコンポーネントISNを下回っている

と呼ばれるコンポーネント内にレンダリングされなければならない以下のJSONファイル

{ 
    "projects":[ 
    { 
    "id":1, 
    "project_name":"Tensor Flow", 
    "category":"Machine Learning", 
    "skills":[{"id":1,"skill_name":"Python"},{"id":2,"skill_name":"Javascript"}] 
    }, 
    { 
     "id":2, 
     "project_name":"React Toolbox", 
     "category":"Frameworks", 
     "skills":[{"id":2,"skill_name":"Javascript"},{"id":3,"skill_name":"React"}] 
    }, 
    { 
     "id":3, 
     "project_name":"Guitar Pro", 
     "category":"Music", 
     "skills":[{"id":2,"skill_name":"Javascript"},{"id":4,"skill_name":"Node"},{"id":1,"skill_name":"Python"}] 
    }, 
    { 
     "id":4, 
     "project_name":"Soccer.js", 
     "category":"Sports", 
     "skills":[{"id":4,"skill_name":"Node"},{"id":1,"skill_name":"Python"},{"id":5,"skill_name":"Golang"}] 
    } 
    ] 
} 

を持っています私は理解できないような理由でページにレンダリングされていません。私は理由が分からない。

Answer 1

あなたのマップ機能でCardActionsを返されていません。

render(){ 
    const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'; 
    return(

     <Card className={styles.card} key={this.props.id}> 
     <CardTitle 
      title={this.state.project.project_name} 
      subtitle={this.state.project.category} 
      /> 
     <CardText>{dummyText}</CardText> 

      {this.state.project.skills.map((skill) => { 
       console.log('Skill is: ',skill); 
       return (
       <CardActions key={skill.id}> 
        <Chip>{skill.skill_name}</Chip> 
       </CardActions> 
      ); 
      })} 

     </Card> 
    ); 
}