PropTypes: начальный useState возвращает объект и не проходит проверку propTypes при добавлении первого элемента - PullRequest
1 голос
/ 12 февраля 2020

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

Я инициализирую состояние 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 ]

0 голосов
/ 12 февраля 2020

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

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

Core.propTypes = {
  dictionary: PropTypes.arrayOf(
    PropTypes.shape({
      definition: PropTypes.string,
      word: PropTypes.string.isRequired
    })
  )
};
0 голосов
/ 12 февраля 2020

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

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

См. Этот вопрос для получения дополнительной информации: React propTypes: objectOf vs shape?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...