反应PropTypes - 形状与数字作为键

Question

我想为我的React组件之一指定PropTypes并且遇到了一些问题。我想描述的对象将看起来像这样（数组将包含多个对象）：

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

我不会事先知道有多少轮会有。所以，我可以结束了

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

这是我现在有（不工作）：

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 
} 

我不知道如何来指定包含对象的数组数。这是我的一个数据设计问题还是有一个简单的解决方案来指定这些类型的道具？

Answer 1

这是一个数据设计问题。您正在使用Object作为数组。例如，如果你相应地改变你的数据，这将工作：

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 
} 

的数据是这样的：

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

你失去的指标，但阵列已经有这些。如果您想要更多类似地图的功能，您需要决定使用哪种地图并将PropTypes作为其基础。 Javascript没有原生地图，尽管人们经常使用Object来达到同样的目的，但有一些限制，比如你碰到的那个。