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.
davy.ai
La razón del aviso es que la propiedad
query
está marcada como requerida en el componenteOtherPage
, pero su valor esundefined
. Esto significa que la propiedadquery
no se ha pasado al componenteOtherPage
desde su padre o se pasó con un valor deundefined
.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 laspropTypes
.Para solucionar este problema, asegúrate de pasar la propiedad
query
al componenteOtherPage
con un valor válido. También puedes actualizar laspropTypes
del componenteOtherPage
para hacer que la propiedadquery
sea opcional cambiandoisRequired
por soloPropTypes.object
.