如何基于数量复制对象数组生成新行？AddNewRow函数改造求助

核心思路 #

1. 先获取用户在数量输入框中输入的有效数值（确保为正整数，默认值设为1）
2. 根据该数值生成对应数量的对象数组，每个对象保持你定义的结构，同时保证index唯一
3. 将生成的数组追加到原有的Product_Details状态中

修改后的完整代码 #

/*For Handling addrow button event */
const addNewRow = () => {
  try {
    // 解析用户输入的数量，处理非有效数值的情况，默认取1
    const inputQty = parseInt(GetLastQty, 10) || 1;
    // 确保数量不小于1
    const validQty = Math.max(inputQty, 1);

    if (
      GetLastProdId === "" ||
      GetLastPrice === "" ||
      GetLastProdSrno === "" ||
      (GetLastProd_Status === "ProDataWarranty" && GetLastProDataWarrentyInPrcnt === "NULL")
    ) {
      console.log("empty fields!!!!!");
      setFill(true);
    } else if (GetLastProdSrno === GetSecondLastProd_Srno) {
      setProdSrnoSame(true);
      console.log("Prod SrNo same!!!");
    } else {
      setProdSrnoSame(false);

      setProduct_Details((prevState) => [
        ...prevState,
        // 生成指定数量的行对象数组
        ...Array.from({ length: validQty }, () => ({
          index: Math.random(), // 保持原唯一标识方式，也可用prevState.length + 索引生成更稳定的唯一值
          billId: BillIdFetch,
          prodId: "",
          price: "",
          prod_SrNo: "",
          discount: "0",
          Qty: "1", // 若需每行显示输入的数量，可改为validQty.toString()
          Prod_Status: "NULL",
          proData_warranty_In_Prcnt: "NULL",
          Credit_Note: "NULL",
          Replacement: "NULL",
        }))
      ]);
    }
  } catch (error) {
    console.log(error);
  }
};

关键细节说明 #

• 数量校验：用parseInt转换输入值，搭配|| 1处理非数字输入，Math.max避免出现0或负数
• 数组生成：通过Array.from快速创建指定长度的数组，每个元素都是预设的行对象
• 唯一标识：保留了你原有的Math.random()生成index，若需更稳定的唯一值，可改为prevState.length + i（需在回调中使用第二个参数索引，例如(_, i) => ({ index: prevState.length + i, ... })）
• Qty字段：如果业务需要每行的Qty显示用户输入的数量（如输入3则每行Qty为3），将Qty: "1"替换为Qty: validQty.toString()即可

内容的提问来源于stack exchange，提问作者Adnan Shaikh