Réagissez PropTypes - forme avec des nombres comme clés

Question

J'essaie de spécifier les PropTypes pour un de mes composants React et j'ai rencontré des problèmes. L'objet que je suis en train de décrire va ressembler à ceci (le tableau contiendra plusieurs objets):

rounds: { 
    1: [ 
     { 
     date: 1429354800000, 
     arena: 'Arena name', 
     scoreHome: 3, 
     scoreAway: 2, 
     teamHome: 'Home team name', 
     teamAway: 'Away team name', 
     spectators: 10 
     } 
    ] 
} 

Je sais pas à l'avance combien de tours il y aura. Donc, je pourrais finir avec

rounds: { 1: [..], 2: [..], 3: [..] } 

C'est ce que j'ai actuellement (ne fonctionne pas):

RoundsTable.propTypes = { 
    rounds: PropTypes.shape({ 
    PropTypes.arrayOf(PropTypes.shape({ 
     date: PropTypes.number.isRequired, 
     arena: PropTypes.string.isRequired, 
     scoreHome: PropTypes.number.isRequired, 
     scoreAway: PropTypes.number.isRequired, 
     teamHome: PropTypes.string.isRequired, 
     teamAway: PropTypes.string.isRequired, 
     spectators: PropTypes.number.isRequired 
    }).isRequired).isRequired 
    }).isRequired 
} 

Je ne sais pas comment spécifier le numéro qui contient le tableau d'objets. Est-ce un problème de conception de données de mon côté ou existe-t-il une solution simple pour spécifier ces types d'accessoires?

Answer 1

Ceci est un problème de conception de données. Vous utilisez un Object en tant que tableau. Par exemple, cela fonctionnerait si vous avez changé vos données en conséquence:

RoundsTable.propTypes = { 
    rounds: PropTypes.arrayOf(PropTypes.shape({ 
     date: PropTypes.number.isRequired, 
     arena: PropTypes.string.isRequired, 
     scoreHome: PropTypes.number.isRequired, 
     scoreAway: PropTypes.number.isRequired, 
     teamHome: PropTypes.string.isRequired, 
     teamAway: PropTypes.string.isRequired, 
     spectators: PropTypes.number.isRequired 
    }).isRequired).isRequired 
} 

Les données se présente comme suit:

rounds: [ 
     { 
     date: 1429354800000, 
     arena: 'Arena name', 
     scoreHome: 3, 
     scoreAway: 2, 
     teamHome: 'Home team name', 
     teamAway: 'Away team name', 
     spectators: 10 
     }, 
     {...} 
] 

Vous perdez les index, mais les tableaux ont déjà ceux-ci. Si vous voulez une fonctionnalité plus semblable à une carte, vous devez décider du type de carte à utiliser et baser vos PropTypes sur cela. Javascript n'a pas de cartes natives, bien que les gens utilisent très souvent Object dans le même but, qui a un certain nombre de limitations, comme celle que vous avez rencontrée.