3

Estou usando o React (16.11.0) com PropTypes (15.7.2) e Hooks.

E eu tenho um componente que recebe um objeto com alguns dados do banco de dados. Testando os dados usando o console.log:

{ console.log('Carousel reciving: ', typeof informations, informations) }

Imprime a seguinte mensagem:

Carousel reciving:  object (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Os dados são enviados ao componente pela chamada:

<Carousel informations={informations} isLoading={isLoading} />

Componente:

const Carousel = ({ informations, isLoading }) => (
    <ReactPlaceholder ...algumas props />...algum contúdo</ReactPlaceholder>
) // Carousel

Mas não importa se eu altero o PropType para vetor ou objeto, continua dando o seguinte erro:

Warning: Failed prop type: Invalid prop informations of type array supplied to Carousel, expected object.

Se eu mudar para PropType.object.isRequired, o erro diz que o valor fornecido é do tipo array. E se eu mudar para PropType.array.isRequired, o erro diz que o valor fornecido é do tipo objeto:

Carousel.propTypes = {
    informations: PropTypes.object.isRequired,
    isLoading: PropTypes.bool.isRequired,
} // propTypes

Eu sei que poderia usar a função de fetch dentro do componente, mas esses dados são compartilhados com outros componentes.

1 Resposta 1

3

Apesar de que, no JavaScript, o tipo de um array é objeto, o PropTypes não considera um array como um objeto.

Demonstração:

console.log(typeof {});
console.log(typeof []);

No seu caso, parece que você está passando um array de objetos para a propriedade informations. Então, no seu PropTypes, você deve declarar que quer validar um array de objetos.

Assim:

Carousel.propTypes = {
  //                      ↓↓↓↓↓↓↓           ↓↓↓↓↓↓
  informations: PropTypes.arrayOf(PropTypes.object).isRequired,
  // Outras propriedades...
}

Adicionei uma demonstração no CodeSandbox.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .