Si no desea utilizar ninguna biblioteca, puede convertir todas sus entradas en un objeto como este:

 const [inputs, setInputs] = useState({ OldGpa: 0, oldHours: 0, firstHour: 0, secondHour: 0, thirdHour: 0, fourthHour: 0, fifthHour: 0, sixthHour: 0, seventhHour: 0, firstPoint: 0, secondPoint: 0, thirdPoint: 0, fourthPoint: 0, fifthPoint: 0, sixthPoint: 0, seventhPoint: 0 });

Ahora su estado en un objeto, por lo que debe "vincular" el valor con value={inputs.property}

Sus entradas necesitarán un atributo de nombre para actualizar la propiedad correcta en este objeto (entienda, el atributo de nombre tendrá que ser el mismo que la propiedad del objeto). Deberá "copiar" el prevState así:

 setInputs(prevState => ({ ...prevState, [name] : value }))

De dónde provienen el nombre y el valor del event

P.EJ

 const handleInputs = (event) => { // destructuring the object let {target } = event; let { name, value } = target; setInputs(prevState => ({ ...prevState, [name] : value })) }

O puede desestructurar el evento directamente en el parámetro de función de esta manera:

 const handleInputs = ({target: { value, name}}) => { setInputs(prevState => ({ ...prevState, [name] : value })) }

// Outside the component: const initialHours = Array(7).fill(0); const initialPoints = Array(7).fill(0); // Inside the component: const [OldGpa, setOldGpa] = useState(0); const [oldHours, setOldHours] = useState(0); const [hours, setHours] = useState(initialHours); const [points, setPoints] = useState(initialPoints); const [GPA, setGPA] = useState(0)

Luego, cada vez que usara secondHour , por ejemplo, usaría hours[1] en su lugar.

En lugar de setSecondHour(newValue) , sería:

 setHours(hours => { hours = hours.slice(); // Copy the array hours[1] = newValue; return hours; });

A veces, ves que la gente hace eso con llamadas de Object.assign slice pero para mí son torpes e innecesariamente complejas. Si desea evitar reescribir esa lógica cada vez (lo cual es algo razonable), escriba una función de utilidad:

 function setArrayElement(array, index, value) { array = array.slice(); array[index] = value; return array; }

y utilícelo al establecer el segundo valor:

 setHours(hours => setArrayElement(hours, 1, newValue));

Si lo desea, puede combinar más cosas en un objeto que almacene en el estado, como se muestra en la documentación .

Nota

A diferencia del método setState que se encuentra en los componentes de clase, useState no fusiona automáticamente los objetos de actualización. Puede replicar este comportamiento combinando el formulario de actualización de funciones con la sintaxis de distribución de objetos:

 const [state, setState] = useState({}); setState(prevState => { // Object.assign would also work return {...prevState, ...updatedValues}; });

Otra opción es useReducer , que es más adecuada para administrar objetos de estado que contienen múltiples subvalores.

(No estoy seguro de estar de acuerdo con la parte "más adecuada", pero useReducer es otra opción).

Puedes considerar esto como una referencia:

 function init(initialCount) { return {count: initialCount}; } function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; case 'decrement': return {count: state.count - 1}; case 'reset': return init(action.payload); default: throw new Error(); } } function Counter({initialCount}) { const [state, dispatch] = useReducer(reducer, initialCount, init); return ( <> Count: {state.count} <button onClick={() => dispatch({type: 'reset', payload: initialCount})}> Reset </button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> <button onClick={() => dispatch({type: 'increment'})}>+</button> </> ); }

Del mismo modo, puede modificar según su caso de uso:

Entonces, la respuesta a su pregunta es... usar useReducer en lugar de useState.