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,
     }],
   },
 }];

我对React中的PropTypes定义有疑问，我将'doc_count_error_upper_bound'字段的类型定义为'number'类型，但是要根据'object'类型进行检查。我认为...

Answer 1

我想您可以解决删除PropTypes.objectOf而仅保留PropTypes.shape的问题（here您可以看到原因）：