TypeError: eleves.map 不是一个函数 React/Spring-boot 不能显示@ManyToOne 关系

Posted 2023-03-28

【中文标题】TypeError: eleves.map 不是一个函数 React/Spring-boot 不能显示@ManyToOne 关系

【英文标题】：TypeError: eleves.map is not a function React/Spring-boot cannot display @ManyToOne relation

【发布时间】：2021-07-14 13:13:23

【问题描述】：

我想要显示 2 个具有多对一关系的实体。但是，当我将数据保存在学生实体中而将级别实体保留为空时，我设法毫无问题地显示它，因为响应是一个对象。

但是，当我将学生与某个级别相关联时，答案就会变成一个数组 []，并且我无法使用 map 函数显示，因为 map 无法遍历数组。 请如果有人有任何想法可以帮助我。

× TypeError: eleves.map is not a function

我把我的代码的捕获放在前面和后面

实体十一

@Entity

@Data @NoArgsConstructor @AllArgsConstructor @ToString 公共类 Eleve 实现 Serializable

@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
//@NotBlank(message = "Ce champs est requis")
@Column(unique = true)
private String matriculeEleve;

@NotBlank(message = "Ce champs est requis")
private String nom;

@NotBlank(message = "Ce champs est requis")
private String prenom;

@NotBlank(message = "Ce champs est requis")
private String adresse;

@NotBlank(message = "Ce champs est requis")
private String contactPrimaire;

private String contactSecondaire;
@NotBlank(message = "Ce champs est requis")

private String nomParents;


@Enumerated(EnumType.STRING)
private Gender gender;

@JsonFormat(shape=Shape.STRING, pattern="yyyy-MM-dd")
@Temporal(TemporalType.DATE)
private Date dateNaissance;

@Column(name = "date_inscription")
@JsonFormat(shape=Shape.STRING, pattern="yyyy-MM-dd")
@Temporal(TemporalType.DATE)
private Date createdAt = new Date(System.currentTimeMillis());

private String statut;

private String photo;

@ManyToOne(fetch = FetchType.LAZY)
private Groupe groupe;

@ManyToOne(fetch = FetchType.LAZY)
private Niveau niveau;

public enum Gender  Masculin, Feminin 

整个尼维奥

 @Entity

@Data @NoArgsConstructor @AllArgsConstructor 公共类 Niveau 实现 Serializable

@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@NotBlank(message = "Ce champ est requis")
private String code_classe;

private String libelle;

@OneToMany(mappedBy = "niveau")
private Collection<Eleve> eleves;

前端反应

动作代码

export const allEleves = () => async dispatch => 
  const res = await axios.get("http://localhost:8080/api/eleve/all");
    dispatch(
      type: GET_ELEVES,
      payload: res.data
    );

元素组件

componentDidMount()
    this.props.allEleves()


render() 
    const eleves  = this.props.eleves

    const listEleveComponent1 = eleves.length < 1 ? (<Info className="alert alert-info text-center" role="alert">Aucun eleve inscrit</Info>) : 
                               eleves.map(eleve => (<ElevesItems key = eleve.id eleve=eleve />
    ))

    return (
        <div className="table-responsive">
             <table className="table table-striped table-bordered first">
                <thead>
                    <tr>
                      <th></th>
                      <th>Matricule</th>
                      <th>Nom</th>
                      <th>Prenom</th>
                      <th>Genre</th>
                      <th>Date de naissance</th>
                      <th>Nom parents</th>
                      <th>Contact 1</th>
                      <th>Contact 2</th>
                      <th>Adresse</th>
                      <th>Niveau</th>
                      <th>Actions</th>
                    </tr>
                 </thead>

                   listEleveComponent
                
             </table>
        </div>

ElevesItems

  <tbody>
   <tr>
       <td> <img src=""  /></td>
          <td>this.props.eleve.matriculeEleve</td>
          <td>this.props.eleve.nom</td>
          <td>this.props.eleve.prenom</td>
          <td>this.props.eleve.gender</td>
          <td>this.props.eleve.dateNaissance</td>
          <td>this.props.eleve.nomParents</td>
          <td>this.props.eleve.contactPrimaire</td>
          <td>this.props.eleve.contactSecondaire</td>
          <td>this.props.eleve.adresse</td>
          <td>this.props.eleve.createdAt</td>
          <td >this.props.eleve.niveau</td>

          <td>
            <Link to=`/eleve-detail/$this.props.eleve.id` className="btn btn-light"><i class="fas fa-eye"></i></Link>
           
            <button className="btn btn-danger" onClick=this.onDelete.bind(this, this.props.eleve.id)><i class="fas fa-trash-alt"/></button>
          </td> 
   </tr>
    
</tbody>

【参考方案1】：

            //I see a problem with de structured array at 
    ````const eleves  = this.props.eleves````
            
            // to solve this u can either convert it into an object for an example
````
            let p2 = ["Annie", "Becky"]
            const p3 = friend: p2
            let friend = p3;
            
            friend.map(e=> e+1).forEach(k=> console.log(k))
````
         // you can check if this.props.eleves this returns an array then create a new //object and add it to that