React PropTypes - 以数字为键的形状

IT技术 javascript validation reactjs react-proptypes
2021-05-07 03:12:47

我正在尝试为我的 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
}

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

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 中创建表单的最佳方法是什么？ 下一篇React Hooks：Hooks 时代的无状态组件 VS 类组件——哪个更好，更推荐？