我想在数组中添加2个数据(可能是1)对象，其中数组是反应状态

Question

这是我的查询，这是我的代码中与问题相关的一小部分我想要3个输入字段不同的数据输入从用户作为在情况下，用户想要添加另一个卖家的详细信息，他可以使用添加按钮显示更多的3个输入字段来填写相同的数据，但不同的卖家从用户那里获得1或2个数据对象后，我想将它们添加到我的状态

import { Input } from "@mui/material";
import React, { useEffect, useState } from "react";
import "react-toastify/dist/ReactToastify.css";
const PlaceInfo = ({ questionCount, placeInfo, setPlaceInfo }) => {

const [vendorCount, setVendorCount] = useState(1);
const [vname, setVname] = useState("");
const [vname2, setVname2] = useState("");
const [sname, setSname] = useState("");
const [sname2, setSname2] = useState("");
const [pno, setPno] = useState("");
const [pno2, setPno2] = useState("");
const [v1, setv1] = useState();
const [v2, setv2] = useState();

const createV1 = (value, of) => {
switch (of) {
case "vname":
setVname(value);
break;
case "sname":
setSname(value);
break;
case "pno":
setPno(value);
break;
default:
break;
}
const vendor = {
vname,
sname,
pno,
};
setv1(vendor);
};
const createV2 = (value, of) => {
switch (of) {
case "vname":
setVname2(value);
break;
case "sname":
setSname2(value);
break;
case "pno":
setPno2(value);
break;
default:
break;
}
const vendor = {
vname,
sname,
pno,
};
setv2(vendor);
};
setPlaceInfo(placeInfo.vegetablesStoresName , [v1,v2])
console.log(placeInfo.vegetablesStoresName)
console.log([v1,v2])
return (
<div className="">

{questionCount == 8 && (
<div className="question   ">
<div className="flex mb-10 font-semibold text-xl text-sky-700">
<h1 className="mr-2 ">{questionCount}.</h1>
<h4 className="font-semibold text-lg">
Please provide top 2 vegetables stores' name.{" "}
</h4>
</div>
<button
type="button"
onClick={() => {
setVendorCount(2);
}}
>
add
</button>
{vendorCount === 2 && (
<button
type="button"
onClick={() => {
setVendorCount(1);
}}
>
remove
</button>
)}
<div className="flex space-x-1">
<Input
placeholder="Vendor Name"
onChange={(e) => createV1(e.target.value, "vname")}
required
/>
<Input
placeholder="Shop Name"
onChange={(e) => createV1(e.target.value, "sname")}
required
/>
<Input
placeholder="Phone No"
onChange={(e) => createV1(e.target.value, "pno")}
required
/>
</div>
{vendorCount === 2 && (
<div className="flex space-x-1">
<Input
placeholder="Vendor Name"
onChange={(e) => createV2(e.target.value, "vname")}
required
/>
<Input
placeholder="Shop Name"
onChange={(e) => createV2(e.target.value, "sname")}
required
/>
<Input
placeholder="Phone No"
onChange={(e) => createV2(e.target.value, "pno")}
required
/>
</div>
)}
</div>
)}

</div>
);
};

export default PlaceInfo;

我现在在单个对象中获取数据，但我想将其设置为setstate如果有人能帮助我与我目前的逻辑将是伟大的，但如果你有任何其他更简单的逻辑，请帮助我我想让数据看起来像这样

[
{ sellerName:'ramesh gupta ', ShopName:'gupta bhandar', mobileNo:'9874563210'},
{ sellerName:'sunil shetty ', ShopName:'shetty veggie store', mobileNo:'9874563210'}
]

Answer 1

从您获得单个对象的地方，您应该使用线程操作符复制旧的obj/data并添加新的obj/data