2

反応で子コンポーネントをレンダリングする際に問題が発生しています。スタイリングには 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 コンポーネントがページにレンダリングされません。理由はわかりません。

4

1 に答える 1

0

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>
    );
}
于 2016-04-26T13:28:59.697 に答える