Tengo problemas para modificar los valores de React de una matriz con useState después de representarlos en una tabla. Aquí hay un ejemplo simple:
//The hook const [awayAbilityAdjust, setAwayAbilityAdjust] = useState([1, 1, 1, 1, 1]); Ahora, lo renderizo en una tabla en Bootstrap con un Form :
<tr> <td>Ability Adjust</td> {awayAbilityAdjust.map((ability, index) => ( <td key={index}> <Form.Control size="sm" type="number" name="ability-input" step="0.1" value={ability} style={{ width: "50px", backgroundColor: "#6d784b", color: "#ffff", }} min="0" max="10" onChange={updateHomeAbility(index) } /> </td> ))} </tr> Aquí está updateHomeAbility :
const updateHomeAbility = (index) => (e) => { const updatedArray = [...homeAbilityAdjust]; homeAbilityAdjust[index] = e.target.value; setHomeAbilityAdjust(updatedArray); }; Sin embargo, esto no cambia ninguno de los valores cuando selecciono los botones arriba y abajo en el Form . ¿Cómo puedo modificar estos valores usando useState ?
Está actualizando homeAbilityAdjust después de copiarlo en updatedArray . Simplemente necesita actualizar updatedArray en su lugar.
const updateHomeAbility = (index) => (e) => { const updatedArray = [...homeAbilityAdjust]; updatedArray[index] = e.target.value; setHomeAbilityAdjust(updatedArray); };