Estoy usando React y encontré algo que no funcionaba del todo, pero tenía mucho sentido para mí:
const [Res, setRes] = useState(<div></div>); const test = (e) => { if (e.keyCode === 13) { setRes( prevState => prevState.append(<p>{e.target.value)}</p>)) } } return( {Res} )Si esto es incorrecto, dígame la forma correcta de resolver problemas similares, por favor.
Mantener JSX en estado es un antipatrón.
En lugar de mantener el estado de JSX en una matriz, mantenga los datos en la matriz sin JSX, luego cree el JSX cuando esté listo para renderizar:
const YourComponent = () => { const [res, setRes] = useState([]); const test = (e) => { const {value} = e.target; if (e.code === "Enter") { setRes(prev => [...prev, value]); } }; return ( <div> {res.map(e => <p>{e}</p>)} </div> ); }; <p> está usando el índice como clave , lo cual es un problema. La forma de solucionarlo es específica de la aplicación dependiendo de dónde provienen sus datos y si se pueden eliminar de la matriz, si es único, etc., pero lo ideal es generar una identificación.
Además, no se debe acceder a e.target.value en una devolución de llamada de establecimiento de estado. Es asíncrono, por lo que el objeto de evento podría haberse quedado obsoleto en el momento de leerlo. Extraiga el valor primitivo en el cierre del controlador.
Sugiero elegir mejores nombres: test y res no tienen sentido.
Finalmente, en lugar de e.keyCode === 13 , use e.code === "Enter" .