React JS 將動態 object 值從 FORM 添加到對象

Question

我有一組對象，我需要一個鍵值

State：

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

表格輸入變化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
        }
    })
}

我的表格

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

如何將handleQty值添加到行state？

Answer 1

與handleInputChange中的方式相同嗎？

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

同樣在 React 中，改變數據也不是一個好習慣。 您應該使用更新的項目創建新列表。

在 ReactJS 的數組中更新 object 的最佳方法是什么？