React JS 将动态 object 值从 FORM 添加到对象

Question

I have array of objects where i need to an key value

State:

const [row, setRow] = useState([{ nameofthework: "", schedulerefNo: "", unitprice: "", qty: "", uom: "", gst: "", total: "" }]);

The form input change function

const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...row];
    list[index][name] = value;
    setRow(list);
    console.log(row);  // Prints out the each row object into and array of objects
};

const handleQty = (e) => {
    const scheduleNumberForQuantity = e.target.value;
    projectScheduleNumber?.filter((v) => {
        if(v["Schedule No"] === scheduleNumberForQuantity ) {
            setScheduleQuantity(v["LOA Qty"]); // return only integer example 1000
        }
    })
}

My Form

<Form.Control as="select" name="schedulerefNo" value={x.schedulerefNo} onChange={e => {handleInputChange(e, i); handleQty(e)}}>

How to add handleQty value to row state?

Answer 1

Same way as in the handleInputChange?

const list = [...row];
const item = list[index];
if (item) {
  item.qty = e.target.value;
  setRow(list);
}

Also in React it is not good practice to mutate data. You should rather create new list with the updated item.

Whats the best way to update an object in an array in ReactJS?