React PropTypes检查错误的类型

Question

我有一个问题的PropTypes定义在反应，我定义的类型的doc_count_error_upper_bound字段的类型是类型的数字，但它得到检查对类型的对象。我假设某个地方的PropTypes定义由于某种原因而崩溃，因为数据和定义似乎都是正确的，其他字段都被处理得很好。

该应用程序由一系列组件组成，这些组件组织成反应网格布局https://github.com/STRML/react-grid-layout

道具类型警告：

 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)

组件属性类型定义

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.object，只留下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,
};