ReactJS Boucler dans mis

Question

J'ai strugling avec cette erreur:

Uncaught TypeError: data.map is not a function

Voici mon code:

import React from 'react'; 
import PropTypes from 'prop-types'; 

const Foo = (props) => { 
    const data = props.data; 

    return (
     <div> 
      { 
       !data ? null : (
        data.map((item, index) => 
         <a>{item.name}</a>) 
       ) 
      } 
     </div> 
    ) 
}; 

export default foo; 

Qu'est-ce que je passe à Foo est un ensemble <> de ceux-ci:

public class Bar extends Dto { 
    public BigDecimal id; 
    public String name; 
} 

Des idées de ce qui pourrait être le cas ici?

EDIT:

import React, { Component } from 'react'; 

class AnotherFoo extends Component { 

    render() { 
    const data = this.props; 

    return (
     <div> 
     <Foo data={data.resultSet} /> 
     </div> 
    ); 
    } 
} 

Answer 1

Je devine votre resultSet est nulle ou non définie à un moment donné. Une chose que vous pouvez faire pour ajouter un peu de robustesse et de clarté est d'ajouter propTypes et defaultProps à votre composant

import React from 'react'; 
import PropTypes from 'prop-types'; 

const Foo = (props) => { 
    const data = props.data; 

    return (
     <div> 
      { 
       !data ? null : (
        data.map((item, index) => 
         <a>{item.name}</a>) 
       ) 
      } 
     </div> 
    ); 
}; 

Foo.propTypes = { 
    data: PropTypes.arrayOf(PropTypes.shape({ 
    name: PropTypes.string 
    }) 
}; 

Foo.defaultProps = { 
    data: [] 
}; 

export default Foo; 

Cela va faire une ou deux choses. Vous donner des avertissements lorsque les données sont de mauvais type et/ou si les éléments dans les données sont de mauvaise forme (ils doivent être des objets avec une propriété de nom). Aussi ... il vous donnera un tableau vide si les données sont indéfinies. Cela devrait éclairer votre problème.