React PropTypes 检查错误的类型

Question

我在 React 中的 PropTypes 定义有问题，我将 'doc_count_error_upper_bound' 字段的类型定义为 'number'，但它会根据类型 'object' 检查。我推测 PropTypes 定义由于某种原因在某处崩溃了，因为数据和定义似乎都是正确的，并且其他字段都被处理好了。

该应用程序由一系列使用 react-grid-layout 组织的组件组成 https://github.com/STRML/react-grid-layout

propTypes 警告：

 index.js:1 Warning: Failed prop type: Invalid prop `data[0].subAggregationTerm.doc_count_error_upper_bound` of type `number` supplied to `MultiBarChart`, expected `object`.
        in MultiBarChart (at App.jsx:219)
        in div (at App.jsx:179)
        in div (at App.jsx:178)
        in Resizable (created by GridItem)
        in DraggableCore (created by GridItem)
        in GridItem (created by ReactGridLayout)
        in div (created by ReactGridLayout)
        in ReactGridLayout (created by ResponsiveReactGridLayout)
        in ResponsiveReactGridLayout (created by WidthProvider)
        in WidthProvider (at App.jsx:231)
        in div (at App.jsx:229)
        in App (at src/index.js:6)

组件 propTypes 定义

MultiBarChart.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      key_as_string: PropTypes.string,
      key: PropTypes.number,
      doc_count: PropTypes.number,
      subAggregationTerm: PropTypes.objectOf(PropTypes.shape({
        doc_count_error_upper_bound: PropTypes.number,
        sum_other_doc_count: PropTypes.number,
        buckets: PropTypes.arrayOf(PropTypes.shape({
          key: PropTypes.number,
          doc_count: PropTypes.number,
        })),
      })),
    }),
  ).isRequired,
  onHit: PropTypes.func.isRequired,
};

数据：

const dateHistogramSubAggs2 = [{
  key_as_string: '1576105200',
  key: 1576105200000,
  doc_count: 0,
  subAggregationTerm: {
    doc_count_error_upper_bound: 0,
    sum_other_doc_count: 0,
    buckets: [{
      key: 'label_1',
      doc_count: 215,
     }],
   },
 }];

Answer 1

我认为你可以解决你的问题，删除 PropTypes.objectOf 并只留下 PropTypes.shape（你会明白为什么）：

MultiBarChart.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      key_as_string: PropTypes.string,
      key: PropTypes.number,
      doc_count: PropTypes.number,
      subAggregationTerm: PropTypes.shape({
        doc_count_error_upper_bound: PropTypes.number,
        sum_other_doc_count: PropTypes.number,
        buckets: PropTypes.arrayOf(PropTypes.shape({
          key: PropTypes.number,
          doc_count: PropTypes.number
        }))
      }),
    }),
  ).isRequired,
  onHit: PropTypes.func.isRequired,
};

React PropTypes 检查错误的类型

React PropTypes checks for the wrong type

reactjs

react-proptypes