PropTypes: начальный useState возвращает объект и не проходит проверку propTypes при добавлении первого элемента

Я не уверен в том, насколько далеко это предполагаемое поведение и в какой степени это ошибка пользователя;

Я инициализирую состояние dictionary как пустой массив.

const [dictionary, setDictionary] = useState([]);

dictionary консольного журнала возвращает мне пустой массив [] , а typeof dictionary возвращает мне объект (почему?).

 > []
     length: 0
     __proto__: Array(0)

 > object

Массив в конечном итоге распространяется пользовательским вводом в форме

[
  {
    word: 'test',
    definition: 'test'
  }
]

Я использую React's propTypes и проверяю целостность следующим образом:

Core.propTypes = {
  dictionary: PropTypes.arrayOf(
    PropTypes.objectOf(
      PropTypes.shape({
        definition: PropTypes.string,
        word: PropTypes.string.isRequired
      })
    )
  )
};

При начальном рендере я не получаю ошибки, но при добавлении первого элемента в массив консоль сообщает мне:

Warning: Failed prop type: Invalid prop `dictionary[0].word` of type `string` supplied 
to `Core`, expected `object`.

При изменении PropType установите флажок

WordRandom.propTypes = {
  dictionary: PropTypes.arrayOf(
    PropTypes.objectOf(
      PropTypes.string.isRequired
    )
  )
};

добавление первого элемента не вызывает предупреждение. Разве мне не разрешено / разрешено проверять каждый элемент в объекте?

Никакое последующее добавление к массиву не вызывает ошибку, поэтому мне интересно, если я что-то обманываю или это предполагаемое поведение, которое не имеет значения?

РЕДАКТИРОВАТЬ: для уточнения:

setDictionary([...dictionary, { word, definition }]);

где слово и определение являются строками

Всего 2 ответа


Просто используйте форму

Форма уже является объектом. Вы добавляете дополнительные уровни, которые вам не нужны в вашем типе.

Core.propTypes = {
  dictionary: PropTypes.arrayOf(
    PropTypes.shape({
      definition: PropTypes.string,
      word: PropTypes.string.isRequired
    })
  )
};

Кажется, вы хотите удалить proptypes.objectOf . objectOf(shape()) будет ожидать объект объектов.

PropTypes.arrayOf(
  PropTypes.shape({
    definition: PropTypes.string,
    word: PropTypes.string.isRequired
  })
)

Обратитесь к этому вопросу для получения дополнительной информации: React propTypes: objectOf vs shape?


Есть идеи?

10000