Zustandsaktualisierung ordnungsgemäß mit Tastaturereignis reagieren ⇐ JavaScript

[Anonymous]

Ich habe ein interessantes Szenario, ich habe eine Reaktionskomponente, die einen Statuswert beibehält und ich möchte das nächste Zeichen damit verketten, wenn entweder die Taste oder ein HTML-Element gedrückt wird.
Das Problem: Wenn das HTML-Element gedrückt wird, wird der Wert problemlos verkettet, wenn jedoch eine Taste gedrückt wird, überschreibt der Wert.
Ich habe den Wert mit useEffect überprüft und er wird aktualisiert aber wenn eine andere Taste gedrückt wird, ist der Wert leer.

Code: Select all

import { useCallback, useEffect, useState } from "react";

export function ValueTest() {
const [value, setValue] = useState("");

const keypress = (v: string) => {
setValue(value + v);
};

const keyUpHandler = useCallback((event) => {
event.preventDefault();
keypress(event.key);
}, []);

useEffect(() => {
document.addEventListener("keyup", keyUpHandler);

return () => {
document.removeEventListener("keyup", keyUpHandler, false);
};
}, [keyUpHandler]);

useEffect(() => {
console.log(value);
}, [value]);

return (

 keypress("1")}
>
1

{value}

);
}