Hola, tengo una pequeña aplicación React que puede aumentar en 1 cuando el usuario hace clic en un botón. El usuario también puede escribir el valor que desee en el cuadro de entrada. Sin embargo, cuando escribo un valor y luego hago clic en el botón, el valor se trata como una cadena, no como un número, es decir, 4 -> 41 -> 411 en lugar de 5 y 6. Esto funciona bien si hago clic en el botón sin escribir el valor es decir, 0->1. Alguien sabe por qué pasa esto ? Gracias
export default function App() { const [value, setValue] = React.useState(0); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <div> <input value={value} onChange={(event) => { setValue(event.target.value); // -> still a number console.log(typeof value); }} /> <button onClick={() => { console.log(typeof value); // -> it is a string setValue(value + 1); }} > Click me </button> </div> </div> ); }Es porque los valores que generan las entradas son cadenas. Si intenta hacer una "suma" con una cadena y un número, javascript "asumirá" que desea recuperar una cadena y tratará tanto el número como la cadena como cadenas.
Si desea asegurarse de que su estado siga siendo un tipo de número, simplemente envuelva su valor así setValue(Number(event.target.value)) . Su botón debería estar bien porque es la entrada que convierte su estado en cadena, por lo que si se ocupa de eso, no necesita hacer nada más.
El valor de e.target.value siempre será una cadena y no depende del tipo de entrada. Para lograr lo que desea, debe convertir la cadena que recibe de la entrada a un número entero. Mediante el uso de la función parseInt proporcionada por javascript
export default function App() { const [value, setValue] = React.useState(0); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <div> <input value={value} onChange={(event) => { setValue(event.target.value); // -> still a number console.log(typeof value); }} /> <button onClick={() => { console.log(typeof value); // -> it is a string setValue(parseInt(value) + 1); //-> line changed added parseInt }} > Click me </button> </div> </div> ); }