es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Advertencia de tipo de propiedad incorrecto en un componente sin cargar

Estoy recibiendo una advertencia para una página en la que no estoy actualmente (estando en https://example.com/this-page).

Advertencia: Error de tipo prop fallido: La prop query está marcada como requerida en OtherPage, pero su valor es undefined.

“prop-types”: “^15.7”,
“react”: “^17.0”,
“react-redux”: “^7.2”,
“react-router-dom”: “^6.0”

Este componente se utiliza directamente en el componente Route.

let global_props = {...}
...
<routes>
    <route path="/this-page" exact="" element=""></route><thispage {...global_props}/="">}/>
    <route path="/other-page" exact="" element=""></route><otherpage {...global_props}/="">}/>
</otherpage></thispage></routes>

Aquí está el componente. Nota que no está usando redux en este momento.

import React, {Component} from 'react';
import PropTypes from "prop-types";

class OtherPage extends Component {
    render() {
        return <div>HI</div>;
    }
}

OtherPage.propTypes = {
    query: PropTypes.object.isRequired
};

export default OtherPage;

¿Cuál podría ser la razón de eso?

Gracias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    La razón del aviso es que la propiedad query está marcada como requerida en el componente OtherPage, pero su valor es undefined. Esto significa que la propiedad query no se ha pasado al componente OtherPage desde su padre o se pasó con un valor de undefined.

    Dado que la propiedad query está marcada como requerida, React muestra un aviso indicando que falta la propiedad o tiene un valor incorrecto. Siempre es una buena práctica proporcionar un valor predeterminado para estas propiedades o hacerlas opcionales no marcándolas como requeridas en las propTypes.

    Para solucionar este problema, asegúrate de pasar la propiedad query al componente OtherPage con un valor válido. También puedes actualizar las propTypes del componente OtherPage para hacer que la propiedad query sea opcional cambiando isRequired por solo PropTypes.object.

Comments are closed.