Después de 2 días de feroces luchas, decidí publicar por primera vez en Stack Overflow :).
Mi inquietud es la siguiente:
Como parte de un proyecto, quiero generar una cantidad de campos de entrada equivalente al tamaño de una matriz. Ejemplo :
function App() { const [UseState, setUseState] = useState(""); const array = [0, 1, 2]; const HandleAdding = (e) => { e.preventDefault; const returnJson = { UseState }; //rest of the code }; return ( <div> {array.map(() => ( <form onSubmit={HandleAdding}> <input value={UseState} onChange={(e) => setUseState(e.target.value)} /> </form> ))} </div> ); }Ya podemos conocer el problema, al insertar un valor en un campo, este mismo valor se insertará en todos los demás campos que comparten el mismo UseState como valor. Para obtener información aún más concreta, aquí hay una ilustración del problema en CodeSandBox:
https://codesandbox.io/s/adoring-rgb-n0bdk?file=/src/App.js
Así que intente completar un campo y notará el problema. Intenté muchas cosas para resolver mi problema de esta manera:
https://codesandbox.io/s/blissful-rain-mcol2?file=/src/App.js (Estoy tratando de adaptar el código para resolver mi problema).
No pongo nada más para que no se haga demasiado largo. Entonces, ¿tendrías una solución para resolver el problema? Por mi parte, me faltan ideas y todavía soy un principiante en React. ¡Gracias por adelantado! ^^
function App() { const [UseState, setUseState] = useState({}); const array = [0, 1, 2]; const size = array.length; const HandleAdding = (e) => { e.preventDefault; const returnJson = { UseState }; //rest of the code }; return ( <div> {array.map((x) => ( <form onSubmit={HandleAdding}> <input value={UseState[x]} onChange={(e) => setUseState({...UseState, [x]: e.target.value})} /> </form> ))} </div> ); } Puede resolver el problema fácilmente cambiando la estructura de UseState para que se convierta en un objeto con el siguiente patrón
UseState = { 0: 'Isaac', 1: 'James', 2: 'John' } Debe almacenar varios valores, por lo que cuando recupera el valor, use UseState[x] y, cuando actualice, debe distribuir el objeto y actualizar el valor de una propiedad en particular.
En general, para los formularios, mantiene los valores de las entradas en un objeto en el estado y luego actualiza ese estado con los nuevos valores cuando se cambia la entrada.
En este momento está creando más formularios de los que necesita. Ni siquiera necesita el elemento de form porque los elementos de input en realidad no lo requieren.
Inicialice su estado con un objeto.
map sobre la matriz en lugar de la longitud de la matriz.
Asigne un nombre a sus entradas para que cuando cambien los valores pueda actualizar fácilmente el estado.
const { useState } = React; function Example() { // Initialise state with an object const [ data, setData ] = useState({}); // Example input names const arr = ['name', 'address', 'number']; // When the input changes, get the name // and the value, and update the state using // that information function handleChange(e) { const { name, value } = e.target; setData({ ...data, [name]: value }); } function handleSubmit() { console.log(data); } function createInputs(arr) { // `map` over the array and return some JSX return arr.map(el => { return ( <label>{el.toUpperCase()}: <input type="text" name={el} /> </label> ); }); } return ( <div onChange={handleChange}> {createInputs(arr)} <button onClick={handleSubmit}>Submit</button> </div> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") ); label { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>