Сохранение списка объектов и добавление в этот список с помощью useState в React

Question

Я должен хранить список объектов в массиве, используя хук useState в React. У меня есть поля ввода с onChange, которые я получаю и пытаюсь поместить / обновить в одном из объектов в списке. Входные данные находятся в виде таблиц, и каждая строка представляет собой набор. Каждый столбец - это повторения, вес и вес. Эти значения принадлежат каждому набору и должны быть сохранены в объекте в массиве. В настоящее время, когда вы редактируете, он не сохраняет все, что вы сделали, а просто сохраняет последнее, что вы сделали в этом ряду.

const [sets, setSets] = useState([]);
    const [numSets, setNumSets] = useState(1);
    const [tableSets, setTablesSets] = useState([]);

    const repsOnChangeHandler = index => e => {
        e.preventDefault();
        //let x = tableSets.push(value);
        console.log(index)
        let tempArray=[...tableSets];
        tempArray[index] = {...tempArray[index], reps: e.target.value}
        setTablesSets(tempArray);
    }

    const rpeOnChangeHandler = index => e => {
        e.preventDefault();
        //let x = tableSets.push(value);
        let tempArray=[...tableSets];
        tempArray[index] = {...tempArray[index], rpe: e.target.value}
        setTablesSets(tempArray);
    }

    const weightOnChangeHandler = index => e => {
        e.preventDefault();
        //let x = tableSets.push(value);
        let tempArray=[...tableSets];
        tempArray[index] = {...tableSets[index], weight: e.target.value}
        setTablesSets(tempArray);
    }

    const addSetHandler = () => {

        let temp = {
            reps: 0,
            rpe: 0,
            weight: 0
        };
        setTablesSets(tableSets.concat(temp));

        let x = numSets;
        setNumSets(x + 1);
        
        setSets([...sets, {
            id: sets.length,
            setValue: <li key={sets.length} className={classes.TableRow}>
                <input type="number" min="1" readOnly="readonly" className={classes.TableInput} value={numSets} />
                <input type="number" min="1" max="40" className={classes.TableInput} onChange={repsOnChangeHandler(numSets-1)} />
                <input type="number" min="1" max="10" className={classes.TableInput} onChange={rpeOnChangeHandler(numSets-1)} />
                <input type="number" min="1" className={classes.TableInput} onChange={weightOnChangeHandler(numSets-1)} />
            </li>
        }]);
    }

Answer 1

const repsOnChangeHandler = index => e => {
        e.preventDefault();
        console.log(index)
        let tempArray = [...tableSets];
        tempArray[index].reps = e.target.value
        setTablesSets(tempArray);
    }

    const rpeOnChangeHandler = index => e => {
        e.preventDefault();
        let tempArray = [...tableSets];
        tempArray[index].rpe = e.target.value
        setTablesSets(tempArray);
    }

    const weightOnChangeHandler = index => e => {
        e.preventDefault();
        let tempArray = [...tableSets];
        tempArray[index].weight = e.target.value;
        setTablesSets(tempArray);
    }

Это изменения, необходимые для его исправления