React - incapaz de establecer el estado en el cambio de entrada

Soy yo. no nuevo para reactr, pero por alguna razón estoy recibiendo este error y no puedo aclararlo:

ERROR : No se puede leer la propiedad 'valor' de null

Código:

const [platform, setPlatform] = React.useState(0);
  const [socialLinksState, setSocialLinksState] = useState({
    instagram: socialLinks?.instagram || "",
    linkedIn: socialLinks?.linkedIn || "",
    youtube: socialLinks?.youtube || "",
  });
  const socialLinksInputHandler = (e) => { 
    if (platform === 0) {
      setSocialLinksState((oldState) => ({
        ...oldState,
        instagram: e.target.value,  // <=== here (it says target is NULL)
      }));
    }
  };


// input field 

  socialLinksInputHandler(e)} //  <=== invoking the function
  value={
    platform === 0
              ? socialLinksState.instagram
              : platform === 1
              ? socialLinksState.linkedIn
              : platform === 2 && socialLinksState.youtube
  }
  placeholder={
    platform === 0
              ? "Instagram URL"
              : platform === 1
              ? "Linkedin Url"
              : platform === 2 && "Youtube Url"
  }
/>

Me pregunto qué es lo que me estoy perdiendo aquí, gracias de antemano!

Pregunta hecha hace 3 años, 4 meses, 26 días - Por logicluminary

3 Respuestas:

  • error está en la parte de bellow

     value={
    platform === 0
              ? socialLinksState.instagram
              : platform === 1
              ? socialLinksState.linkedIn
              : platform === 2 && socialLinksState.youtube
  }

    si socialLinksState o socialLinksState es indefinido / null entonces lanzará error. para evitar que puedas tomar ayuda de Lodash.

    import _ from 'lodash'

...
...
...
 value={
        platform === 0
                  ? _.get(socialLinksState,'instagram','')
                  : platform === 1
                  ? _.get(socialLinksState,'linkedIn','')
                  : platform === 2 && _.get(socialLinksState,'youtube','')
      }

    también evitar el operador de terinaria anidado profundo y el uso si dentro del método de renderizado y utilizar el valor final.

    Respondida el Dec 20, 2020 a las 21:20 - por pythonpirate

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás viendo "No se puede leer la propiedad 'value' de null" se debe a que estás pasando incorrectamente la función del manejador de eventos onChange en el input. Vamos a corregir eso.

    En lugar de:

    jsx
  socialLinksInputHandler(e)} />

    Deberías usar:

    jsx
 socialLinksInputHandler(e)}
  value={
    platform === 0
              ? socialLinksState.instagram
              : platform === 1
              ? socialLinksState.linkedIn
              : platform === 2 && socialLinksState.youtube
  }
  placeholder={
    platform === 0
              ? "Instagram URL"
              : platform === 1
              ? "Linkedin Url"
              : platform === 2 && "Youtube Url"
  }
/>

    Además, asegúrate de que no haya errores en la definición de socialLinks antes de utilizar el operador ?. en la inicialización del estado de socialLinksState.

    Con estos cambios, el error de "No se puede leer la propiedad 'value' de null" debería resolverse. Espero que esto te haya ayudado a solucionar el problema. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 21, 2020 a las 21:25 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El error "No se puede leer la propiedad 'valor' de null" indica que estás intentando acceder a la propiedad valor de un objeto nulo. En este caso, parece que el objeto nulo es el e.target.

    Esto puede ocurrir por varias razones:

    • El elemento de entrada aún no se ha montado en el DOM.
    • El elemento de entrada no existe en el DOM.
    • El elemento de entrada no tiene asignado ningún valor.

    En tu caso, la primera razón es la más probable. Estás intentando acceder a e.target.value en el controlador de eventos socialLinksInputHandler, que se activa cuando el valor del campo de entrada cambia. Sin embargo, el campo de entrada aún no se ha montado en el DOM cuando se activa el controlador de eventos.

    Para resolver este problema, puedes envolver el controlador de eventos socialLinksInputHandler en un useEffect con una dependencia de vacío. Esto garantizará que el controlador de eventos solo se active después de que el campo de entrada se haya montado en el DOM:

    javascript
useEffect(() => {
  const socialLinksInputHandler = (e) => {
    if (platform === 0) {
      setSocialLinksState((oldState) => ({
        ...oldState,
        instagram: e.target.value,
      }));
    }
  };

  // Añade el controlador de eventos al campo de entrada
  const input = document.querySelector('input');
  input.addEventListener('change', socialLinksInputHandler);

  // Limpia el controlador de eventos en el desmontaje
  return () => {
    input.removeEventListener('change', socialLinksInputHandler);
  };
}, []);

    También puedes simplificar el controlador de eventos utilizando la sintaxis abreviada de flecha:

    javascript
const socialLinksInputHandler = (e) => {
  if (platform === 0) {
    setSocialLinksState((oldState) => ({
      ...oldState,
      instagram: e.target.value,
    }));
  }
};

    Y añadir el controlador de eventos directamente al campo de entrada en el marcado:

    javascript

    Además, asegúrese de que el campo de entrada tenga un valor inicial asignado. Puedes hacerlo utilizando el atributo value en el marcado:

    javascript

    Respondida el Dec 21, 2020 a las 21:31 - por Gemini

    Votos positivos: 0 | Votos negativos: 0