我是这个论坛的新人。我有一个问题。当我从表中删除最后一行时，插入数据的其他行也会被删除。
这是您必须通过观察看到的代码:
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>
);
}
}
这是 RenderDetail，它在迭代时包含 DetailComponent:
const RenderDetail = ({fields, meta: { error,submitFailed}}) => {
return(
<dl>
<b> Detail: </b>
<dt>
{/*When Clicking on Add Detail Add each row to the table "detail"*/}
<button type="button" className= 'btn btn-primary' onClick={() =>
fields.push()}>Add Detail</button>
{submitFailed && error && <span>{error}</span>}
</dt>
<div className='table-responsive'>
<table className='table table-striped table-sm'>
{/*Here I'm declaring the columns of the table*/}
<thead>
<tr>
<th>Quantity</th>
<th>Product's code</th>
<th>Product's name</th>
<th>Product's price</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
{/*HERE inside tbody tag I'm getting fields from every detail item*/}
{ fields.map((registerDetail, index) =>
{/*Detail is the class Component*/}
<Detail detailItem={registerDetail} fields={fields} index={index} key={index} />
)}
</tbody>
</table>
</div>
{error && <dt className="error">{error}</dt>}
<button className='btn btn-light mr-2'
type="button"
title="Remove Detail"
onClick={() =>{
//THIS FOLLOWING line I'm assign the index from last row to selectedIndex
let selectedIndex = fields.length - 1;
//HERE IS THE KEY LINE you must pay attention
fields && fields.remove(selectedIndex);
}}>
Delete Detail
</button>
</dl>
)};
在这里，我使用 redux 表单初始化我的详细信息组件:
//INITIALIZATING DETAIL COMPONENT FORM
Detail = reduxForm({
form: 'bill',
validate
})(Detail);
在这里，我连接详细组件并绑定(bind) reducer 和操作。理论上来说，表格形式应该保存在state中。
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)
我将向您解释该表是如何工作的。当我单击添加详细信息时，我添加了一行。例如我添加了 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);
关于javascript - 如何从表单中的表中删除最后一行，而没有插入数据的其他行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60461066/