React組件不會在腳本語句中呈現

Question

我在找到反應中的子組件時遇到問題。我正在使用React-Toolbox進行造型。

我有下面的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"}] 
    } 
    ] 
} 

這個文件應該被稱爲工程

組件內呈現

我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因爲我看起來不明白的原因，沒有在頁面中呈現。我不確定是什麼原因。

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