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, 5 meses, 2 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 desocialLinksState
.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 ele.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 eventossocialLinksInputHandler
, 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 unuseEffect
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