javascript - 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
}

我不确定如何指定包含对象数组的数字。是我这边的数据设计问题，还是有指定这些 Prop 的简单解决方案？

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
       },
       {...}
]

你失去了索引，但数组已经有了。如果你想要更多类似 map 的功能，你需要决定使用哪种 map ，并将你的 PropTypes 建立在它的基础上。 Javascript 没有本地映射，尽管人们经常出于相同目的使用 Object，但它有许多限制，例如您遇到的限制。