Usar REACT CONTEXT para almacenar METODOS que a su vez muestren el VALOR de los ESTADOS de un COMPONENTE
Estoy usando estados y providers. Intento llamar a un handle almacenado en el Provider. Cuando invoco este método no muestra el nuevo valor del estado.
-
supongamos que el estado inicial es: name: 'goku'
-
Ahora lo actualizo con useEffect: setName: 'VEGETA' 2.1. Ademas de eso, guardo en un Provider un método handle que mostrara a name
-
ahora asigno ese método handle a un evento (cual sea, onClick, onKeyDown, onHover...)
-
ahora cuando intento llamarlo me muestra el nombre inicial de name: 'goku'
Entonces. Como hago para que el hacedle muestre el valor actual de ese estado, o mejor aun, cual es la mejor manera de realizar esto.
liunk a codesambox: https://codesandbox.io/s/modest-wind-cts9n?fontsize=14&hidenavigation=1&theme=dark
ComponentExample = () => {
const [{ handleKeyDown }, dispatchHandles] = useContext(HandlesContext);
const [name, setName] = useState("goku");
useEffect(() => {
dispatchHandles({
type: SET_HANDLE,
handleName: "handleKeyDown",
handle: () => alert(name) //Este handle no carga el nombre del estado!!!!!
});
setName("VEGETA"); // Ahora le digo que se llame VEGETA.
return () =>
dispatchHandles({
type: DELETE_HANDLE,
handleName: "handleKeyDown"
});
}, []);
return (
<div>
Como lo cambie con useEffect ahora dice: {name}
<br />
<input onClick={handleKeyDown} />
{/*Cuando llama al metodo no muestra el nuevo nombre cargado con el useEffect*/}
</div>
);
};