Estoy tratando de obtener una línea escrita de XTerm.js con una devolución de llamada del elemento principal cada vez que el usuario coloca un nuevo carácter en el terminal, luego el elemento principal actualiza la cadena que agrega caracteres desde el elemento secundario hasta el último de la cadena. Pero cada vez que llamo a la función addChar(), el estado de la línea se restablece a "".

Aplicación.tsx:

 import React, { useEffect, useState } from "react"; import "./App.css"; import XTerm from "./components/XTerm"; function App() { const [currentLine, setCurrentLine] = useState<string>(""); useEffect(() => { console.log(currentLine); }, [currentLine]); const addChar = (char: string) => { let newLine = currentLine + char; console.log(currentLine, char); setCurrentLine(newLine); }; return ( <div className="App"> <div className="Inner"> <XTerm addChar={addChar} /> </div> </div> ); } export default App;

XTerm.tsx:

 import { FunctionComponent, useEffect, useRef } from "react"; import "xterm/css/xterm.css"; import { Terminal } from "xterm"; type types = { addChar: (char: string) => void; }; const XTerm: FunctionComponent<types> = ({ addChar, }) => { const terminalElement = useRef<HTMLDivElement>(null); useEffect(() => { var term = new Terminal(); term.open(terminalElement.current as HTMLDivElement); term.onKey(({ domEvent }) => { addChar(domEvent.key); return term.write(key); }); term.write("Hostname: "); return () => { term.clear(); }; }, []); return <div ref={terminalElement}></div>; }; export default XTerm;

El problema es que la cadena se restablece a ""

Gracias.