ReactJS：无法将动态组件值作为数组传递给方法答案

【问题标题】：ReactJS：无法将动态组件值作为数组传递给方法
【发布时间】：2022-01-23 09:03:29
【问题描述】：

我正在寻找有关使用 React js 以数组格式传递可编辑表值的解决方案。我的 jsx 页面上有文本输入和可编辑的表格组件。

当我尝试将表数据作为数组放入有效负载以进行表单提交时出现问题。除数组外，所有组件都被存储。

以下是整个场景的分步说明，以便您更好地理解。

在服务器端

const SaleSchema= new mongoose.Schema({
  salesdate:{type:String,trim:true},
  orderitems: [{    
    itemcode: { type: String, required: true },
    itemname: { type: String, required: true },
    stock: { type: String, required: true },
    buyquantity: { type: String, required: true },
    subtotalprice: { type: String, required: true }
}],
comment:{type:String,trim:true} },{ timestamps: true });

在客户端

const [salesDate, setSalesDate] = useState(null);   
const [comment, setComment] = useState("");
const [selectedItems, setSelectedItems] = useState([]);

setSelectedItems([...selectedItems,{ itemCode: item.itemcode, 
                                     itemName: item.itemName, 
                                     stock: item.quantity, 
                                     changequantity: 1, 
                                     subTotal: item.subtotalprice}])

...

2.a.将数据呈现到一个可编辑的表格中，其中 Quantity 和 Sub Total 的值是动态的。

 <Table celled unstackable>   
   <Table.Header>       
      <Table.Row>
        <Table.HeaderCell>Item Name</Table.HeaderCell>
        <Table.HeaderCell>Stock</Table.HeaderCell>
        <Table.HeaderCell>Quantity</Table.HeaderCell>
        <Table.HeaderCell>Sub Total</Table.HeaderCell>        
      </Table.Row>    
   </Table.Header>    
   <Table.Body>    
     {selectedItems?.map((item) => (      
       <Table.Row key={item.itemCode}>
         <Table.Cell>{item.itemName}</Table.Cell>
         <Table.Cell>{item.stock}</Table.Cell>
         <Table.Cell collapsing>          
           <Input size="mini" type="number" value={item.changequantity} onChange={(e)=>
            {handleQuantityChange(item.itemCode,e.target.value)}}/>
         </Table.Cell>
         <Table.Cell>{item.subTotal}</Table.Cell>
       </Table.Row>     
        ))}   
   </Table.Body>   
 </Table>

...

2.b。调用句柄提交方法，将数据与新数据一起保存在 mongo 集合中。

const handleSubmit = (e, item) => {
   e.preventDefault();
   let payload;
   payload = {
     salesdate:salesDate,
     orderitems: setSelectedItems([...selectedItems,{itemCode: item.itemcode, 
                                                     itemName: item.itemName, 
                                                     stock: item.stock, 
                                                     buyquantity: item.quantity, 
                                                     subtotalprice: item.subTotal}]),
     comment:comment}
  callPostRequest(CREATE_SALES, payload).then((res)=>{
      console.log("response: ", res);
      ...
    })
    .catch((err)=>{
      ...
    })}}

问题：我认为问题出在有效负载变量内部，虽然我无法解决问题，所以我需要你们的帮助。

【问题讨论】：

标签： reactjs mongodb react-hooks mern

【解决方案1】：

在 setSelectedItem 中，除了设置状态外，它不返回任何内容。您需要一种不同的方法来设置状态，然后返回对象。因此您可以调用该函数并将该对象设置为有效负载

【讨论】：