React 组件不在脚本语句中呈现

Question

我发现在 react 中渲染子组件时遇到问题。我正在使用 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 的组件中呈现

我的 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 组件没有在页面中呈现。不知道是什么原因。

Answer 1

您没有在 map 函数中返回 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>
    );
}