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 来达到同样的目的，但它有很多限制，比如你有运行的地图。

React PropTypes - 以数字为键的形状

React PropTypes - shape with numbers as keys

javascript

validation

reactjs

react-proptypes