如何将 useState 变量值传递给 INSERT 数据 react.js 和 mysql 的对象字段数组？

Question

**我有一个账单表格，其中我有一些产品详细信息，管理员可以填写这些详细信息，但是 1 个名为“BillID”的字段我想直接将一个包含 'Bill ID + 1' 值的变量传递给它作为默认值。

**这是我的代码：-

  const [BillIdFetch, setBillIdFetch] = useState();

 useEffect(() => {
    axios.get("http://localhost:5000/getLastBill_Id").then(( res ) => {
      setBillIdFetch(res.data[0].Bill_Id + 1);
    });
  }, []);

 console.log("===>>>> Testing BillIdFetch ",BillIdFetch) //**I check in this variable value stored perfectly.

const [Product_Details, setProduct_Details] = useState([
    {
      index: Math.random(),
      billId : BillIdFetch, //**I want 'BllIdFetch' value pass to this state variable.
      prodId: "",
      qty: "",
      price: "",
      prod_SrNo: "",
      discount_price: "",
      proData_warranty: "",
    },
  ]);

在 'BillIdFetch' 中我得到了正确的 id + 1 值，我也使用这个值来显示账单号。在表单栏中。但是当我将此值设置为 'billId' 时，它显示如下：- {billId: undefined}

这是对服务器的post请求。

在此向其传递 'Produt_Details' 对象数组。

 const config = {
        header: {
          "Content type": "appication/json",
        },
      };

      const { data } = await axios.post(
        "http://localhost:5000/billing_data",
        { p_value: Product_Details },
        config
      );

Answer 1

你需要做的是检查BillIdFetch何时改变，然后为Product_Details设置正确的状态值。在您当前的代码中，设置 Product_Details? 值的代码将在获取之前运行。

要解决此问题，请使用 useEffect 挂钩并将 BillIdFetch 作为依赖项，因此，当 BillIdFetch 更改时，此代码将运行。

它可能看起来像这样：

const [Product_Details, setProduct_Details] = useState([]);
const [BillIdFetch, setBillIdFetch] = useState();

useEffect(() => {
   axios.get("http://localhost:5000/getLastBill_Id").then(( res ) => {
     setBillIdFetch(res.data[0].Bill_Id + 1);
   });
}, []);

useEffect(() => {
    if (billIdFetch === undefined) return;
    setProduct_Details([{
      index: Math.random(),
      billId : BillIdFetch,
      prodId: "",
      qty: "",
      price: "",
      prod_SrNo: "",
      discount_price: "",
      proData_warranty: "",
    }])
}, [billIdFetch])

如何将 useState 变量值传递给 INSERT 数据 react.js 和 mysql 的对象字段数组？

how to pass useState variable value to array of object field for INSERT data react.js and mysql?

javascript

mysql

node.js

express

reactjs