在您的React应用中

Question

我想在单击特定行时从数组中删除一个元素。
当我单击某个元素时，它什么也不做，或者最后一行被删除。

我试图删除这样的元素：

ondeleterow(e: any) {
  const array = [...this.state.fields.columns]; // make a separate copy of the array
  const index = array.indexOf(e.target.id);
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({ fields: { columns: array }});
  }
}

我的array / json对象如下：

[ {index: 0, name: "person 1", age: 12},
  {index: 1, name: "person 2", age: 19},
  {index: 2, name: "person 3", age: 34},
]

我的结果应该是当我单击状态为ID=1的行时，将状态状态为index: 1的行删除。
我不能给他们一个ID，因为当我提交json结构时，它不会被接受。

Answer 1

切勿使用 splice 进行反应，尤其是对状态做出反应时。他们直接突变数据。使用非变异操作，例如切片。

您的代码应如下

ondeleterow(e: any) {
 const array = [...this.state.fields.columns]; // make a separate copy of the array
 const index = array.indexOf(e.target.id);
 if (index !== -1) {
  array.splice(index, 1);
  this.setState({ fields: {
    columns: [ ...array.slice(0, index), ...array.slice(index + 1, array.length) ]
  }});
 }
}

Answer 2

我觉得您的Array.splice可能是造成此问题的原因（因为即使您创建了一个新数组，该数组中的对象仍会通过引用传递）。

我建议您使用一种完全不同的方法来执行此操作，我发现它更干净，更可靠。

首先，您必须为每行添加一个唯一的id字段。（无论如何，这都是一种很好的做法，而不是使用索引作为键）。

ondeleterow(id: string) {
  return (e: any) => {
    const array = this.state.fields.column.filter(item => item.id != id)
    this.setState({ fields: { columns: array }});
  }
}

，当您在行上进行映射时，只需将函数添加到onClick

<Row key={item.id} onClick={ondeleterow(item.id)} />

Answer 3

您可以使用Array.filter。这将允许您基于特定条件仅使用所需项目创建新数组。在这种情况下，您需要一个数组，其中的项具有与要删除的ID不同的ID。所以看起来像这样

// Actual processing
const filterByIndex = (arr, idx) => arr.filter(x => x.index !== idx);

// Your data
const json = [{
    index: 0,
    name: "person 1",
    age: 12
  },
  {
    index: 1,
    name: "person 2",
    age: 19
  },
  {
    index: 2,
    name: "person 3",
    age: 34
  },
];

// Printing the result
console.log(filterByIndex(json, 1));

在您的React应用中

ondeleterow(e: any) {
    const columns = this.state.fields.columns.filter(x => x.index !== e.target.id);
    this.setState({ fields: { columns }});
}

Answer 4

尝试一下

onDeleteRow(e) {
    const afterRemoval = this.setState.fields.columns.filter(item => item.index != e.target.id);
    this.setState(prevState => ({ fields: { ...prevState.fields, columns: afterRemoval } }));
}

上面的另一种解决方案直接设置fields字段，它可能起作用，但是如果fields具有columns以外的其他属性（这些属性将被删除），则会引起问题 >

如何从数组反应中删除正确的元素？

4 个答案:

在您的React应用中