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