React PropTypes проверяет неправильный тип - PullRequest
Новая
       7

React PropTypes проверяет неправильный тип

0 голосов
/ 15 января 2020

У меня проблема с определением PropTypes в React, я определил тип поля 'doc_count_error_upper_bound' типа 'число' , но проверяется по типу 'object' . Я предполагаю, что где-то определение PropTypes ломается по какой-то причине, так как и данные, и определение кажутся правильными, а остальные поля обрабатываются нормально.

Приложение состоит из ряда компонентов, организованных с реагированием -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,
     }],
   },
 }];

1 Ответ

2 голосов
/ 15 января 2020

Я думаю, вы могли бы решить вашу проблему, убрав 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,
};
...