1

Tengo una consulta, estoy trabajando en un proyecto en React 17 y Next 12, y existe una forma de validar que un objeto no es null de una forma que no conocia, algo como:

miObjeto?.objetoInterior?.propiedad = value

Esto evita hacer cosas como if(miObjeto && miObjeto.objetoInterior) {...}

Primero pense que era una caracteristica de JS, pero cuando lo intente en un proyecto de Vue lanzaba errores.

Ahora, quiero hacer una funcion asi:

useEffect(() => {
    const body = document.querySelector("body") || null;
    if (mobileMapState === 3) {
      handleOpenMap();
      body.style.overflow = "hidden";
    } else {
      body.style.overflow = "auto";
    }
  }, [mobileMapState]);

Y me sucede que quiero asegurarme que body no sea null antes de hacer body.style.overflow = "hidden";, para lo que intento hacer

body?.style?.overflow = "hidden";

Y recibo un error de Eslint:

Parsing error: Invalid left-hand side in assignment expression.

Entonces intento

body && body.style.overflow = "hidden";

Pero el error es el mismo.

La unica forma que encontre de hacer esto fue:

  if (body) {
    body.style.overflow = "hidden";
  }

Y si bien funciona, me surgen dudas, como por ejemplo porque no puedo usar ? en este caso, y si hubiera una forma correcta de utilizarla para hacer mas corta la validacion.

Muchas gracias

0

1 respuesta 1

3

Se le conoce como encadenamiento opcional

Y lo que hace es simplificar el acceso a los valorers regresando null o undefined si la misma no existe, en vez de marcar error.

Tambien es mas legible que el operador corto circuito.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

Referencia: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Ahora bien para el desactivar dicha linea

adventurer.dog?.name; // eslint-disable-line no-use-before-define

O directamente en el config.

{ "allowShortCircuit": true, "allowTernary": true }

Referencia:

https://eslint.org/docs/latest/rules/no-unused-expressions

2
  • muchas gracias! no sabia como googlearlo jaja 🤦🏽‍♂️ una pregunta out-of-context... yo intente usar este verificador en un proyecto de Nuxt y me arrojaba errores, no me permitia usarlo, de ahi que pense que era de React/Next, y ahora veo que es de JS. Es necesaria alguna configuracion previa o version minima de node, por ejemplo? Ya que me extraña que no haya funcionado en un archivo .vue
    – Agustin G.
    Commented el 25 ago. 2022 a las 15:41
  • Es un feacture 2020
    – Bryro
    Commented el 25 ago. 2022 a las 16:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.