React 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 用于相同目的，但它有许多限制，例如您遇到的限制。