Tengo algunos datos que se muestran en una tabla. Cuando agrego una celda de datos de tabla (td) con JS, el valor predeterminado y el texto interno de la celda de datos de tabla anterior (td) se copian en los nuevos datos de tabla (td). no entiendo porque pasa esto? Solo agrego un nuevo elemento html que, en esencia, no tiene nada que ver con el elemento ya existente, diría yo.
const [dataSet, setDataSet] = useState([ { City: "Amsterdam", Provence: "North-Holland" }, { City: "Rotterdam", Provence: "South-Holland" } ]); const newCity = () => { const city = [ { City: "Groningen", Provence: "Groningen" } ]; setDataSet(city); }; <button onClick={newCity}>Add city</button> <table> <tr> <th>City</th> <th>Provence</th> </tr> {dataSet.map(city => ( <tr> <td> <input defaultValue={city.City}/> </td> <td> <input defaultValue={city.Provence}/> </td> </tr> )} </table>Entonces, cuando hago clic en el botón 'nueva ciudad', se agrega una nueva fila de la tabla (tr), pero en lugar de llenar las celdas de datos de la tabla (td) con los datos correctos (Ciudad: 'Groningen', Provence: 'Groningen') se llena el td con los datos de la fila de la tabla anterior (tr) (Ciudad: 'Amsterdam', Provence: 'North-Holland'). Esto me parece realmente extraño, ya que solo agrego un nuevo elemento html que no tiene relación con la fila de la tabla (tr) antes de eximirlo por estar en la misma tabla.
Aquí hay un enlace de codebox para ver el comportamiento en acción: https://codesandbox.io/s/dry-water-rss2m8?file=/src/App.js
¿Por qué se comporta así?
Necesitas establecer una clave en el artículo.
{dataSet.map((city) => ( <tr key={city.City}>... etc
Hay dos cosas importantes a tener en cuenta aquí.
Primero, su programa está emitiendo una advertencia:
Advertencia: cada niño en una lista debe tener un accesorio de "clave" único.
Trate siempre con las advertencias. ¡Están ahí por una razón!
En segundo lugar, se trata de un valor predeterminado (a diferencia del actual ).
Cuando reemplaza la matriz con una nueva matriz, React genera un nuevo JSX y lo compara con el DOM existente.
La primera fila tiene la misma (falta de) clave, por lo que cambia los valores predeterminados de la fila existente. (La segunda fila ya no existe por lo que la elimina).
Cambiar los valores predeterminados no tiene ningún efecto a través de: Las entradas ya tienen valores, que continúan mostrando.
Podría dar las claves de filas generadas:
<tr key={something}>… pero tendrás que averiguar qué es ese algo.
Puede usar el nombre de la ciudad, pero parece que ese es un dato que podría cambiar, por lo que cambiar el nombre de la ciudad haría que pareciera una nueva fila y no una actualización de una fila existente.
Podría considerar usar el módulo uuid para generar una ID única cuando se crea el objeto.
También puede controlar las entradas pasándoles valores en lugar de valores predeterminados. Esto requeriría que actualice el valor que les pasa a medida que se editan.
Supongo que es porque estás trabajando con componentes no controlados.
Si desea que sus valores de entrada reflejen los cambios de estado, debe usar el valor y no el valor predeterminado, y probablemente también desee tener un controlador onChange.
<input value={city.City} />