Javascript 如何在没有插入数据的其他行的情况下从表单中删除表中的最后一行？

我是这个论坛的新手。我有个问题。当我从表中删除最后一行时，包含插入数据的其他行也将被删除

以下是您必须通过观察看到的代码：

      const selector = formValueSelector('bill'); //initializating a selector. bill is the name of 
                                                   // the form.

然后就在代码行下面：

                      const selector = formValueSelector('bill');

我有一个名为Detail的类组件：

             class Detail extends Component{

                    //In the FOLLOWING LINES I'm changing props of calculated subtotal called as 
                    //"isSubtotal"
             componentDidUpdate(prevProps, index) {
                   if (this.props.isSubtotal !== prevProps.isSubtotal) {
                        this.props.dispatch(
                     //bill is the name of the form. Changing subtotal detail with dynamic index.
                      //this.props.index is the dynamic index and this.props.isSubtotal is calculated 
                      //value
                change('bill', `detail[${this.props.index}].subtotal`, this.props.isSubtotal)
                   );
                    }
                    } 



                         //HERE I'm rendering Detail's component

                               render(){

                           const{detailItem,index,fields,isSubtotal} = this.props;

                                return(


                             <tr key={index}>

                             <td>
                               <Field 
                                id={`${detailItem}._id`}
                                name={`${detailItem}.quantity`}
                                type='number'
                                component= {UtilityQuantity}
                                placeholder= '...quantity'
                                // label = "Quantity" 
                                 />
                                </td>


                                 <td>
                                 <Field 
                                   id={`${detailItem}._id`}
                                   name={`${detailItem}.product.code`}
                                   type="number"
                                   component= {UtilityCode}
                                   placeholder='...Product's code'
                                   //label = "Product's code" 
                                     />
                                     </td>

                                      <td>
                                       <Field 
                                        id={`${detailItem}._id`}
                                        name={`${detailItem}.product.name`}
                                        type="text"
                                        component= {UtilityName}
                                        placeholder='...product's name'
                                        // label = "Product's name" 
                                         />
                                        </td>

                                <td>
                                 <Field 
                                  id={`${detailItem}._id`}
                                  name={`${detailItem}.product.price`}
                                  type="number"
                                  component= {UtilityPrice}
                                  placeholder= '...Price'
                                  // label = "Product's price" 
                                   />
                                 </td>

                                  <td>
                                  <Field 
                                   id={`${detailItem}._id`}
                                   name={`${detailItem}.subtotal`}
                                   component= {UtilitySubtotal}
                                   placeholder= '...subtotal'
                                   // label = "Subtotal" 
                                     >
                                    {isSubtotal}
                                     </Field> 
                                      </td>
                                      </tr>
                                        );
                                         }

                                          }

在这里，我将连接细节组件和绑定缩减器和操作。理论上，表格应保存为状态

                             Detail = connect((state,props,fields) =>{


                               const quantity = selector(state,`${props.detailItem}.quantity`);

                                const price = selector(state,`${props.detailItem}.product.price`);

                                return{

                                  isSubtotal: quantity * price

                                    }
                                  },{})(Detail) 

我会向你解释它是如何在桌子上工作的。当我单击AddDetail时，我添加了一行。e、 我加了5行

      And e.g I insert 10 in quantity and 20 in price on first row and I've got 200 in subtotal field. Subtotal is not editable. It's calculated.

         Now, in second row I insert 10 in quantity and 10 in price and I've got 100 in subtotal. The other rows are empty. The data form should be like this:

                                row 1 : {quantity: 10, product: {code: 13321, name: "product 1", 
                                       price: 20}, subtotal: 200},

                                row 2 : {quantity: 10, product: {code: 12222, name: "product 2", 
                                            price: 10}, subtotal: 100}

                                row 3 : {quantity: null, product: {code: null, name: null, 
                                                    price: null}, subtotal: null}


                                row 4 : {quantity: null, product: {code: null, name: null, 
                                                    price: null}, subtotal: null}


                                row 5 : {quantity: null, product: {code: null, name: null, 
                                                    price: null}, subtotal: null}

 the expected behavior is When I'm deleting last row, row 5 in this case, the data I'm showing on screen should be like this:

                                row 1 : {quantity: 10, product: {code: 13321, name: "product 1", 
                                       price: 20}, subtotal: 200},

                                row 2 : {quantity: 10, product: {code: 12222, name: "product 2", 
                                            price: 10}, subtotal: 100}

                                row 3 : {quantity: null, product: {code: null, name: null, 
                                                    price: null}, subtotal: null}


                                row 4 : {quantity: null, product: {code: null, name: null, 
                                                    price: null}, subtotal: null}

但真正的输出是当我删除最后一行时。在这种情况下，第5行、第1行和第2行也将被删除。我有下一个输出：

                                 row 3 : {quantity: null, product: {code: null, name: null, 
                                                    price: null}, subtotal: null}


                                row 4 : {quantity: null, product: {code: null, name: null, 
                                                    price: null}, subtotal: null}

我不仅删除了表的最后一行，还删除了包含值的行​​我插入的内容也会被删除

有人能想出解决这个问题的办法吗

---

如何解决这个问题？

理解代码有点难。一个更好的方式来显示你的工作将是repl.it快速理解。无论如何，我认为应该使用split来删除带有索引的目标数组

field.splice(selectedIndex, 1);

---

理解代码有点难。一个更好的方式来显示你的工作将是repl.it快速理解。无论如何，我认为应该使用split来删除带有索引的目标数组

field.splice(selectedIndex, 1);

field.splice(selectedIndex, 1);