在 React 中使用 useState 存储对象列表并添加到该列表

Question

我必须在 React 中使用 useState 挂钩将对象列表存储在数组中。我有带有 onChange 的输入字段，我得到它的值并在列表中的一个对象中尝试 put/update 它。输入在类似结构的表格中，每一行代表一个集合。每列是代表、rpe 和重量。这些值属于每个集合，需要保存在数组中的一个对象中。目前，当您编辑时，它不会保存您所做的一切，而只会保存您在该行中所做的最后一件事。

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);
    }

这些是修复它所需的更改

在 React 中使用 useState 存储对象列表并添加到该列表

Storing a list of objects and adding to that list using useState in React

javascript

input

onchange

reactjs

use-state