0
211
Vistas¿Cómo verificar si una propiedad es nula en reactjs?
Estoy aquí con una pregunta básica. Si comparo directamente las variables, puedo obtener resultados definidos. Pero no puedo verificar si un valor pasado como propiedad es nulo o indefinido. Porque nunca se muestra como nulo o indefinido. Así que la verificación condicional no funciona. Entonces, por favor, aconséjeme cómo verificar si una propiedad no está definida o es nula.
import { memo, useRef } from "react"; const MyComponent = (myList) => { const renderTimes = useRef(0); return ( <div> {renderTimes.current++} <div>Rendered : {renderTimes.current} times.</div> {console.log( "block. Is it null? : ", myList === null, " is it undefined ? ", myList === undefined, "Check type:", typeof myList === "undefined" )} </div> ); }; export default MyComponent; 
<MyComponent myList={undefined} />Si no paso nada o incluso pasé la propiedad nombrada como nula e indefinida, ambas veces muestra el mismo resultado.
2 Respuestas
Responde la pregunta0
Puede modificar modificar su código como tal:
import { memo, useRef } from "react"; const MyComponent = (props) => { const renderTimes = useRef(0); // Checks if the "myList" element is defined if(this.props.myList === undefined) { console.log('myList is not defined') } return ( <div> {renderTimes.current++} <div>Rendered : {renderTimes.current} times.</div> {console.log( "block. Is it null? : ", {{ props.myList }} === null, " is it undefined ? ", {{ props.myList }} === undefined, "Check type:", typeof {{ props.myList }} === "undefined" )} </div> ); }; export default MyComponent;0
En resumen: su variable 'myList' es en realidad el objeto de accesorios ; nunca mostraría un valor nulo/indefinido (ya que es un objeto).
La forma correcta de pasar valores a los componentes (desde un componente principal) es a través del objeto props. En el componente secundario, los obtiene de esta manera ( NOTA: sin esto, ya que este es un componente funcional ):
Usando el ejemplo que proporcionó:
Comp de padres (lo que has hecho allí estuvo bien):
<MyComponent myList = {...} />Niño comp:
{props.myList}(O sin los soportes cuando se usa fuera del bloque de retorno).
Por cierto, si desea crear un contador de procesamiento, la forma correcta de hacerlo es realizar renderCounter++; comando fuera del bloque de retorno (en el que luego mostrará la variable actualizada), es decir,
... renderTimes.current++; return ( <div> {renderTimes.current} ...Creo que podría estar obteniendo resultados incorrectos del contador de esta manera, aunque no estoy seguro.
Recuerde que useRef() no vuelve a renderizar el componente, mientras que useState() sí lo hace (no sé exactamente qué estaba tratando de lograr allí, solo lo menciono fwiw.